Jquery plug-in AutoComplete perfect journey

Recently, in a project, you need to search data for a project selected by the user, but there are too many projects to select. If you bind the project to dropdownlist, it will be very slow, it is hard to find out if there are too many projects,

In this way, we can use the jquery plug-in autocomplete. However, the official example of such a plug-in is very simple, but it is not that easy to add your own needs.ArticleFinally, download the plug-in and CSS of the plug-in are provided.

Style File.

Here I use JSON as the data source, so JSON can be dynamically loaded, but in order to ensure efficiency, I wroteCodeAnd put the JSON string in an HTML. Then, it is passed through the autocomplete parameter.

The Code is as follows:

 
1:StringSqljson ="Select T. logicalname, T. longname from speciality t";
 

 
2:Datatable tbjson = dB. executedataset (commandtype. Text, sqljson). Tables [0];
 

 
3:StringJsonstring =This. Datatable2json (tbjson );
 

4: 
 

 
5: # RegionDatatable to JSON format
 

 
6:/// <Summary>
 

 
7:/// Datatable converted to JSON format
 

 
8:/// </Summary>
 

 
9:/// <Param name = "DT"> </param>
 

 
10:/// <Returns> </returns>
 

 
11:Public StringDatatable2json (datatable DT ){
 

12:Stringbuilder jsonbuilder =NewStringbuilder ();
 

 
13:Jsonbuilder. append ("{\"");
 

 
14:Jsonbuilder. append (Dt. tablename. Trim (). tostring ());
 

 
15:Jsonbuilder. append ("\":[");
 

 
16:For(IntI = 0; I <DT. Rows. Count; I ++ ){
 

 
17:Jsonbuilder. append ("{");
 

 
18:For(IntJ = 0; j <DT. Columns. Count; j ++ ){
 

19:Jsonbuilder. append ("\"");
 

 
20:Jsonbuilder. append (Dt. Columns [J]. columnname );
 

 
21:Jsonbuilder. append ("\":\"");
 

 
22:Jsonbuilder. append (Dt. Rows [I] [J]. tostring (). Trim ());
 

 
23:Jsonbuilder. append ("\",");
 

 
24:}
 

 
25:Jsonbuilder. Remove (jsonbuilder. Length-1, 1 );
 

26:Jsonbuilder. append ("},");
 

 
27:}
 

 
28:Jsonbuilder. Remove (jsonbuilder. Length-1, 1 );
 

 
29:Jsonbuilder. append ("]");
 

 
30:Jsonbuilder. append ("}");
 

 
31:ReturnJsonbuilder. tostring ();
 

 
32:}
 

 
33:# Endregion
 

When generating JSON data, you may encounter a problem: the shard name.

Forget, here there is a tablename at the beginning of the generated JSON. Because this is added during the JSON Abel conversion to JSON, You need to delete this table, delete the last braces. Above

The datatable2json method is used to convert datatable to JSON format. Of course, this also indicates that it is easy to convert data from dataset to JSON data.

After doing the above, I started to debug the code in Vs and found that there was no response in IE, but it was displayed in Google chorme, but it was garbled, whatever the simplified JSON data ),

Garbled characters are displayed. Then, it's like if something goes wrong. Debugging is similar to the official example. JSON data is directly written in JS Code. The Code is as follows:

 
1:<SCRIPT type ="Text/JavaScript">
 

 
2: 
 

 
3:VaRWebsites = [
 

 
4:"Google","Netease","Sohu","Sina","Sogou","Baidu","Tencent",
 

5:"Taobao","Tom","Yahoo","Javaeye","Csdn","Alipay"
 

 
6:];
 

 
7: 
 

 
8:$ (). Ready (Function(){
 

 
9:$ ("# Txttest"). AutoComplete (websites );
 

 
10:});
 

 
11:</SCRIPT>
 

The result shows that it is quite normal. This is strange. Later, I thought about Directly Writing the machine-generated JSON into the TXT file. Then the following code is added to the background:

 
1: Using(Streamwriter Sw = file. appendtext (@ "C: \ 123.txt")){
 

2:Sw. Write (jsonstring );
 

 
3:}
 

Of course, you must create a new 123.txt file under the C directory.

In this way, the JSON is retrieved, and the tablename in the file header and the braces at the end are removed, because JSON is a very rigorous format. This may be why I cannot implement it in the form of replication.

In this way, it is displayed successfully. Of course, you must note that you need to modify the officially downloaded documents. Because official documents do not support Chinese prompts.

Specific modification method:

In the downloaded jquery source code, line 92nd of jquery. autocomplete. js replaces "keydown" with "keyup". Although Chinese prompts are supported in IE

Errors still occur. Then modifySource code:

Line 199th of the original jquery. autocomplete. JS, insert the following code

 
1:. BIND ("Input",Function(){
 

 
2: 
 

 
3:// Yeanjay: provides support for Chinese smart prompts in Firefox
 

 
4: 
 

 
5:Onchange (0,True);
 

6: 
 

 
7:});
 

 

 

 

 

The following is the JS Code automatically prompted:

1:<SCRIPT type ="Text/JavaScript">
 

 
2:/* =========== User-defined method ============= */
 

 
3:// Device List
 

 
4:VaR devicelist;
 

 
5:// For the autocomplete option, refer to the official $ ("# txttest"). AutoComplete (devicelist, options); method.
 

 
6:VaROptions = {
 

 
7:Minchars: 1,
 

 
8:MAX: 500,
 

 
9:Width: 300,
 

10:Datatype:'Json',
 

 
11:Matchcontains:True,
 

 
12:Formatitem:Function(Row, I, max ){
 

 
13:ReturnI +"/"+ MAX +":\""+ Row. longname;
 

 
14:},
 

 
15:Formatmatch:Function(Row, I, max ){
 

 
16:ReturnRow. longname;
 

 
17:},
 

18:Formatresult:Function(ROW ){
 

 
19:ReturnRow. longname;
 

 
20:}
 

 
21:};
 

 
22:// AutoComplete initialization Function
 

 
23:FunctionInitautocomplete (data ){
 

 
24:Devicelist = data;
 

 
25:$ ("# Txttest"). AutoComplete (devicelist, options );
 

26:$ ("# Txttest"). Result (Function(Event, Data, formatted ){
 

 
27:$ ("# Txtanalyseobject"). Val (data. logicalname );
 

 
28:});
 

 
29:}
 

 
30: 
 

 
31:/* =========== The statement executed during loading ============= */
 

 
32:$ (Function(){
 

 
33:// Load the device name data and initialize AutoComplete with the returned data in the callback function
 

34:$. Getjson ("Devicename.htm",Null, Initautocomplete)
 

 
35:});
 

 
36:</SCRIPT>
 

Here, Data. longname is the name of the device, and data. logicalname is the logical name of the device, because the logical name is used to retrieve the data. Therefore, the logic name is displayed in another

Hidden textbox.

This completes the automatic prompt task. The method is as follows. The document below is only for personal archiving. You may not be able to correctly execute this article. Because it also needs to load other things. If you need to know

You can leave a message. However, the source code of the modified plug-in and the CSS source code of the modified plug-in can be used.

Jquery.autocomplete.css, jquery. autocomplete. JS, And the JSON file of the device name are all in the following compressed package.

/Files/upthinking/jqueryautocompletecss.rar