How AutoComplete auto-Completion Works

I. Brief Introduction
Yesterday, a support Colleague helped her customer achieve the following results (automatically completed ):

I used to call the real estate dictionary when I searched for the house:

This is a small feature and a large feature. Because it can be larger or smaller.
2. Soufun's AutoComplete
For example, we can see that Soufun is doing a big job. You need to see such an effect. In fact, Soufun has done so many things:

1. Database Job. Save the daily real estate dictionary to XML, and each city corresponds to an XML file. For example, bj_11_04.xml generated today
2. Add Memcached to the business logic layer. When accessing Memcached, the user first checks whether there is any in Memcached. If there is any, the user will go through the cache. If there is no, the user will read the XML and enter the cache.
3. AJAX call
4. Pinyin calls the Real Estate Dictionary (started and deleted later, for unknown reasons), which is the effect below

Therefore, this function can be larger or smaller. If it is too large, you need to apply to add servers. So before doing this function, you need to understand the traffic volume.
Iii. Coding
The following describes what we did yesterday based entirely on JqueryUI,
ASPX code:

Copy codeThe Code is as follows: <link rel = "stylesheet" href = "Styles/jquery-ui.css" type = "text/css" media = "all"/>
<Script type = "text/javascript" src = "Scripts/jquery. min. js"> </script>
<Script type = "text/javascript" src = "Scripts/jquery-ui.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Tbsearch'). autocomplete ({
Source: "AutoComplete. ashx"
});
});
</Script>

Background code:Copy codeThe 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 );
}

Someone may ask, how is the term in context. Request. QueryString ["term? We cannot see the term through aspx.
We can use the F12 NetWork of any browser to capture it:

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

Copy codeThe Code is as follows: public JsonResult GetResourceByKeyWord ()
{
// Get searchResult here
Return Json (searchResult, JsonRequestBehavior. AllowGet );
}