平時用百度，輸入一個字後都有匹配的選項讓你選擇。想做一個這樣的東西查看資料發現要用到jquer.autocomplete.第一天就做出可簡單的，可是後期大數據量時候老是出錯，本來以爲是ajax有數據傳輸上限，後來發現是數據中存在特殊字符導致不能解析成json。因爲json的結構是[{name:'xxx',age:'12'},{},{}]而這個結構又是由一個string解析來的。所以不能包含如下字符[',",{,}]最後發現製表符換行符都不行。\t,\r,\n。這個整整用了2天才找出來。。好了貼代碼
參照資料
http://bbs.chinaunix.net/thread-1736796-1-1.html
//自定義提示.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>自定義提示</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="Scripts/jquery.autocomplete.css" />
<script type="text/javascript" charset="utf-8">
var emails = [
{ name: "Peter Pan", to: "[email protected]" },
{ name: "Molly", to: "ssa" },
{ name: "Forneria Marconi", to: "[email protected]" },
{ name: "Master <em>Sync</em>", to: "ss" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "ss" },
{ name: "Don Corleone", to: "ss" },
{ name: "Mc Chick", to: "[email protected]" },
{ name: "Donnie Darko", to: "[email protected]" },
{ name: "Quake The Net", to: "ss" },
{ name: "Dr. Write", to: "ss" },
{ name: "Mc_xueyong", to: "[email protected]" },
{ name: "Dota", to: "[email protected]" },
{ name: "Dota", to: "[email protected]" },
{ name: "Dota", to: "[email protected]" },
{ name: "Dota", to: "[email protected]" }
];
$(function () {
$('#keyword').autocomplete("data.aspx", {
max: 20, //列表裏的條目數
minChars: 0, //自動完成激活之前填入的最小字符
width: 400, //提示的寬度，溢出隱藏
scrollHeight: 300, //提示的高度，溢出顯示滾動條
matchContains: true, //包含匹配，就是data參數裏的數據，是否只要包含文本框裏的數據就顯示
autoFill: false, //自動填充
//需要把data轉換成json數據格式
parse: function (data) {
return $.map(eval(data), function (row) {
return {
data: row,
value: row.name + row.modelname,
result: row.name
}
});
},
formatItem: function (row, i, max) {
return "<div style='float:left;width:100px'>" + row.name + " " + "</div>" +
"<div style='float:left;width:100px'>" + row.modelname + "</div>";
},
formatMatch: function (row, i, max) {
return row.name + row.modelname;
},
formatResult: function (row) {
return row.name;
}
}).result(function (event, row, formatted) {
$("#twoColum_abbr").val("你選擇了\n名稱："+row.name+"\n"+"規格型號："+row.modelname);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="keyword" />
<input id="getValue" value="提交" type="button" />
</div>
<textarea id="twoColum_abbr" style="width:250px" rows="4" cols="6"></textarea>
</form>
</body>
</html>
//data.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data.OleDb;
using System.Data;
public partial class data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Response.Clear();
Response.Charset = "utf-8";
Response.Buffer = true;
this.EnableViewState = false;
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.ContentType = "text/plain";
Response.Write(GetLikeUserName());
Response.Flush();
Response.Close();
Response.End();
}
}
private string GetLikeUserName()
{
string connectionString = "Data Source=.;Initial Catalog=SameWayAgile_4_14;User ID=sa;pwd=sa;Provider=SQLOLEDB";
DataSet ds = new DataSet();
using (OleDbConnection conn = new OleDbConnection(connectionString))
{
//查詢字符串，必須包含主鍵，否則不會自動生成更新語句
//string SQLString = "select [row],[floor],[line],[bit],[goodname],[shortname],[modelname] from [Part_Goods]";
//string SQLString = "select top 1 * from (SELECT top 8612 a.[GoodsName] as goodname,b.ModelName as modelname FROM (SELECT [ModelId] ,[GoodsName] FROM [SameWayAgile_4_14].[dbo].[Part_Goods]) AS a "
//+"FULL JOIN (SELECT [ModelId] ,[ModelName] FROM [SameWayAgile_4_14].[dbo].[Part_GoodsModel]) AS b ON a.ModelId =b.ModelId ORDER BY goodname desc)as c order by goodname";
string SQLString = "SELECT a.[GoodsName] as goodname,b.ModelName as modelname FROM (SELECT [ModelId] ,[GoodsName] FROM [SameWayAgile_4_14].[dbo].[Part_Goods]) AS a "
+ "FULL JOIN (SELECT [ModelId] ,[ModelName] FROM [SameWayAgile_4_14].[dbo].[Part_GoodsModel]) AS b ON a.ModelId =b.ModelId ORDER BY goodname desc";
try
{
conn.Open();
OleDbDataAdapter adapter = new OleDbDataAdapter();
adapter.SelectCommand = new OleDbCommand(SQLString, conn);
OleDbCommandBuilder builder = new OleDbCommandBuilder(adapter);
adapter.Fill(ds);
}
catch (System.Data.SqlClient.SqlException E)
{
conn.Close();
throw new Exception(E.Message);
}
}
StringBuilder sbstr = new StringBuilder();
sbstr.Append("[");
foreach (DataTable table in ds.Tables)
{
foreach (DataRow dr in table.Rows)
{
//調試用，爲了找到有問題的字符串，最後發現有{',",{,},\t,\r,\n}
//if(dr[0].ToString().Contains('\\') )
// sbstr.Append(dr[0]+" ");
//if (dr[1].ToString().Contains('\\'))
//sbstr.Append(dr[1] + " ");
//if (dr[0].ToString().Contains('{') || dr[0].ToString().Contains('}') || dr[0].ToString().Contains('\'') || dr[0].ToString().Contains('\"'))
//{
// dr[0] = dr[0].ToString().Replace("\'", "\\\'").Replace("\"", "\\\"").Replace('{', ' ').Replace('}', ' ');
// sbstr.Append(dr[0] + " ");
//}
//if (dr[1].ToString().Contains('{') || dr[1].ToString().Contains('}') || dr[1].ToString().Contains('\'') || dr[1].ToString().Contains('\"'))
//{
// dr[1] = dr[1].ToString().Replace("\'", "\\\'").Replace("\"", "\\\"").Replace('{', ' ').Replace('}', ' ');
// sbstr.Append(dr[1] + "_______");
//}
//for(int i =0;i<dr[0].ToString().Length;i++)
// if(dr[0].ToString()[i].ToString().Equals("\t")||dr[0].ToString()[i].ToString().Equals("\r"))
// sbstr.Append(dr[0].ToString()[i].ToString()+"\n");
dr[0] =dr[0].ToString().Replace("\'", "\\\'").Replace("\"", "\\\"").Replace('{', ' ').Replace('}', ' ').Replace('\t',' ').Replace('\r',' ').Replace('\n',' ');
//發現不能這樣替換dr[1] = dr[1].ToString().Replace(Array("\'","\"",'{','}'),Array("\\\'","\\\"",' ',' ');
dr[1] = dr[1].ToString().Replace("\'", "\\\'").Replace("\"", "\\\"").Replace('{', ' ').Replace('}', ' ').Replace('\t', ' ').Replace('\r', ' ').Replace('\n', ' ');
sbstr.Append("{name:'" + dr[0].ToString() + "',modelname:'" + dr[1] + "'},");
}
}
sbstr.Remove(sbstr.Length - 1, 1);
sbstr.Append("]");
return sbstr.ToString();
//string[] str = { "January", "Ceshi", "jQuery", "josn", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
//string[] strc = { "January", "Ceshi", "jQuery", "josn", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
//StringBuilder sbstr = new StringBuilder();
//sbstr.Append("[");
//for (int i = 0; i < str.Length; i++)
//{
// if (i == str.Length - 1)
// {
// sbstr.Append("{name:'" + str[i] + "',to:'" + strc[i] + "'}");
// }
// else
// {
// //sbstr.Append("{name:'" + str[i] + "',to:'中文測試" + i + Request.QueryString["q"] + "'},");
// sbstr.Append("{name:'" + str[i] + "',to:'" + strc[i] + "'},");
// }
//}
//sbstr.Append("]");
//return sbstr.ToString();
}
}運行效果