Besides, the realization principle of AutoComplete automatic complement is _jquery

I. Brief
Yesterday support a colleague to help her clients do something like the following effect (auto-complete):

I used to get this when I was searching the house, call the real estate dictionary:

This is a small function, but also a big function. Because it can be bigger, can also do small.
Two. Search the room AutoComplete
For example, the above we see the House of this big, you want to see such an effect, in fact, the search house did so several things:

1. Database operations. The Daily Real estate dictionary is stored in XML, which corresponds to one XML per city. Like today's bj_11_04.xml.
2. Business logic Layer plus memcached. When users visit, first judge whether there is memcached, some words go cache, no words read XML, and into the cache.
3.AJAX Call
4. Pinyin Call Real Estate dictionary (began to do, and then deleted, the reason is unknown), is the following effect

So, this function, can be bigger, can also do small. Bigger to apply for adding servers. So before you do this, be aware of the amount of traffic.
Three. Coding
Here's what we did yesterday, completely based on jQueryUI,
ASPX code:

Copy Code code 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 Code code as follows:

public void ProcessRequest (HttpContext context)
{
String SearchText = context. request.querystring["term"];
Get result
//````
//````
Get result
JavaScriptSerializer serializer = new JavaScriptSerializer ();
String jsonstring = serializer. Serialize (results);
Context. Response.Write (jsonstring);
}

Some may ask, context. request.querystring["term"]; how did the term come from? We don't see term through aspx.
We can grab it out of any browser's F12 network:

Above is the implementation under ASP.net, in asp.net MVC2 or MVC3 or MVC4, we do not use JavaScriptSerializer and ashx this way to serialize into JSON and write to the client, Because they provide a jsonresult

Copy Code code as follows:

Public Jsonresult Getresourcebykeyword ()
{
Get SearchResult
Return Json (SearchResult, jsonrequestbehavior.allowget);
}