c#+jquery-autocomplete實現類似百度，Google模糊查詢
阿新 • • 發佈：2019-02-08
由於現有系統有一個介面顯示不友好，因此寫單獨重寫了這個頁面。期中有個要查詢庫位的功能。閒著沒事做成類似百度，Google模糊查詢的效果了
後臺CS程式碼：
其他參考連結
中英文都可以。
效果圖：
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"
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