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>

<script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>

	var arry=new Array();
	 		$(document).ready(function () {
	 			$.ajax({
	 				type: "POST",
	 				contentType: "application/json",
	 				url: "AjaxPage.aspx/GetAllHints",
	 				data: "{}",
	 				dataType: "json",
	 				success: function (msg)
	 				{
	 					var datas = eval('(' + msg.d + ')');
	 					for(var i=0;i<datas.length;i++)
	 					{
	 						arry[i]=datas[i].Key;
	 					}
					$("#txtIput").autocomplete( 
						{
							source:arry
						});
				}
			});
		});

后台CS代码：

[WebMethod]
		public static string GetAllHints()
		{
			Dictionary<string, string> data = new Dictionary<string, string>();
			data.Add("ActionScript", "21782");
			data.Add("AppleScript", "238061");
			data.Add("BASIC", "838360");
			data.Add("Clojure", "242721");
			data.Add("COBOL", "63348");
			data.Add("苹果4s", "24030");
			data.Add("戴尔笔记本", "110105");
			data.Add("戴尔手机", "18870");
			data.Add("戴尔键盘", "30367");

			//JSON序列化
			DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
			string dataString=string.Empty;
			//定义一个stream用来存放序列化之后的内容
			using (MemoryStream ms = new MemoryStream())
			{
				  serializer.WriteObject(ms, data);
				  //返回json 字符串  
				  return System.Text.Encoding.UTF8.GetString(ms.ToArray());
			}
		}

第二种方法：

   var websites= [
                'Google', 'NetEase', "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
                "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
            ];  
            $.ajax({
                type: "post",
                url: "../../WHSMHandler.ashx",
                data: "SupplierSeach=All",
                datatype: "json",
                async: false,
                success: function (msg, textstatus, xmlhttprequest) {
                    if (msg != null) {
                        var suppelier = new Array();
                        suppelier = msg.split(',');
                        $("#txtSearchGoodsSuppler").autocomplete(suppelier, { //suppelier改成websites可以直接看效果，否则需要从后台获取数据
                            minChars: 1, //自动完成激活之前填入的最小字符
                            width: 260,//提示的宽度，溢出隐藏  
                            scrollHeight: 300,   //提示的高度，溢出显示滚动条   
                            fillin: true,
                            max: 50,//列表里的条目数    
                            matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示    
                            autoFill: true,//自动填充   
                            formatItem: function (data, i, total)
                            {
                                return "<I>" + data[0] + "</I>";
                            },
                            formatMatch: function (data, i, total) {
                                alert("formatMatch" + data[0]);
                                return data[0];
                            },
                            formatResult: function (data) {
                                alert("formatResult" + data[0]);
                                return data[0];
                            }
                        });
                    }
                },
                error: function (errorinfo) {
                    alert("获取供应商信息错误。");
                }
            });
后台代码：
 public static string testGetSearchSupplierListInfo(string strKeyword)
        {
            StringBuilder sb = new StringBuilder();
      
            string jsponString = "";
            using (WHSMDataContext db = new WHSMDataContext())
            {
                var getSupplier = from p in db.SupplierInfo
                                  where p.suppliervalidate == 'Y' //&& p.suppliername.Contains(strKeyword)
                                  select new { SupplierID = p.suppliercode, SupplierName = p.suppliername };

                foreach (var str in getSupplier)
                    //jsponString += "\"" + str.SupplierName + "\",";
                    jsponString +=  str.SupplierName + ",";
            }
     
            jsponString = jsponString.Trim(new char[] { ',' });
           // jsponString += "]";

            return jsponString;//.Replace("'","/\"")
        }

第三种方法：

  //$("#txtSearchGoodsSuppler").autocomplete("../../WHSMHandler.ashx",
            //    {
            //        max: 20,    //列表里的条目数    
            //        minChars: 1,    //自动完成激活之前填入的最小字符    
            //        width: 260,     //提示的宽度，溢出隐藏    
            //        scrollHeight: 300,   //提示的高度，溢出显示滚动条    
            //        matchContains: false,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示    
            //        //autoFill: true,    //自动填充    
            //        minLength: 1,
            //        formatItem: function (data, i, total) {
            //            return "<I>" + data[0] + "</I>";
            //        },
            //        formatMatch: function (data, i, total) {
            //            return data[0];
            //        },
            //        formatResult: function (data) {
            //            return data[0];
            //        }
            //    });
StringBuilder sb = new StringBuilder();
if (!string.IsNullOrEmpty(context.Request["q"]))
            {
                context.Response.Write(
                    SupplierModule.GetSearchSupplierListInfo(
                    context.Request["q"]));
            }

  foreach (var str in getSupplier)
 sb.Append("["+str.SupplierID+"]"+str.SupplierName+ "\n");
 return  sb.ToString().TrimEnd(',');

其他参考链接

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