c#+jquery-autocomplete实现类似百度，Google模糊查询

由于现有系统有一个界面显示不友好，因此写单独重写了这个页面。期中有个要查询库位的功能。闲着没事做成类似百度，Google模糊查询的效果了

中英文都可以。

效果图：

JS代码如下：

首先引用 css js 可到官方网站去下载 点击打开链接

  <link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.js"></script>

[javascript] view plain copy

1. var arry=new Array();  
2.         $(document).ready(function () {  
3.             $.ajax({  
4.                 type: "POST",  
5.                 contentType: "application/json",  
6.                 url: "AjaxPage.aspx/GetAllHints",  
7.                 data: "{}",  
8.                 dataType: "json",  
9.                 success: function (msg)  
10.                 {  
11.                     var datas = eval('(' + msg.d + ')');  
12.                     for(var i=0;i<datas.length;i++)  
13.                     {  
14.                         arry[i]=datas[i].Key;  
15.                     }  
16.                 $("#txtIput").autocomplete(   
17.                     {  
18.                         source:arry  
19.                     });  
20.             }  
21.         });  
22.     });  

后台CS代码：

[csharp] view plain copy

1. [WebMethod]  
2.         public static string GetAllHints()  
3.         {  
4.             Dictionary<string, string> data = new Dictionary<string, string>();  
5.             data.Add("ActionScript", "21782");  
6.             data.Add("AppleScript", "238061");  
7.             data.Add("BASIC", "838360");  
8.             data.Add("Clojure", "242721");  
9.             data.Add("COBOL", "63348");  
10.             data.Add("苹果4s", "24030");  
11.             data.Add("戴尔笔记本", "110105");  
12.             data.Add("戴尔手机", "18870");  
13.             data.Add("戴尔键盘", "30367");  
14.   
15.             //JSON序列化  
16.             DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());  
17.             string dataString=string.Empty;  
18.             //定义一个stream用来存放序列化之后的内容  
19.             using (MemoryStream ms = new MemoryStream())  
20.             {  
21.                   serializer.WriteObject(ms, data);  
22.                   //返回json 字符串    
23.                   return System.Text.Encoding.UTF8.GetString(ms.ToArray());  
24.             }  
25.         }  

其他参考链接

http://05ds210.blog.163.com/blog/static/5428207120095561314427/

http://kb.cnblogs.com/page/73227/

http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html

http://hi.baidu.com/aplesen/item/77c163d9e9b72656d63aaebf