Home > Web Front-end > JS Tutorial > body text

Let's talk about the implementation principle of AutoComplete automatic completion_jquery

WBOY
Release: 2016-05-16 17:59:37
Original
1543 people have browsed it

1. Brief description
Yesterday, a support colleague helped her client to achieve an effect similar to the following (automatic completion):

image

I did this before when searching for a house, calling the real estate dictionary:

image

This is a small function, but also a big one. Because it can be made big or small.
2. Soufun’s AutoComplete
For example, as we saw above, Soufun’s AutoComplete has become bigger. If you want to see such an effect, Soufun has actually done the following things:

1. Database job. Store the daily real estate dictionary in XML, with one XML corresponding to each city. For example, the bj_11_04.xml generated today
2. Add Memcached to the business logic layer. When the user accesses, first determine whether there is it in Memcached. If there is, go to the cache. If not, read the XML and put it in the cache.
3. AJAX call
4. Pinyin call real estate dictionary (I started doing it, but later deleted it, the reason is unknown), the effect is as follows

image

So, this function can be made larger or smaller. When it gets bigger, you need to apply to add a server. So before doing this function, you need to understand the number of visits.
3.Coding
The following is what I made yesterday, which is completely based on JqueryUI,
ASPX code:

Copy code The code is as follows:






Backend code:
Copy code The code is as follows:

public void ProcessRequest(HttpContext context)
{
string searchText = context.Request.QueryString["term"];
//Get Result here
//````
//````
//Get Result here
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonString = serializer.Serialize(results);
context.Response.Write(jsonString);
}

Maybe someone You may ask, where does the term in context.Request.QueryString["term"]; come from? We can't see the term at all through aspx.
We can capture it using F12’s NetWork of any browser:

image

The above is the implementation under ASP.NET. In ASP.NET MVC2 or MVC3 or MVC4, we do not need to use JavaScriptSerializer and ashx to serialize into JSON and write to the client because they provide JSONResult

Copy code The code is as follows:

public JsonResult GetResourceByKeyWord()
{
//get searchResult here
return Json(searchResult, JsonRequestBehavior.AllowGet);
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!