平時用百度，輸入一個字後都有匹配的選項讓你選擇。想做一個這樣的東西查看資料發現要用到jquer.autocomplete.第一天就做出可簡單的，可是後期大資料量時候老是出錯，本來以為是ajax有資料轉送上限，後來發現是資料中存在特殊字元導致不能解析成json。因為json的結構是[{name:'xxx',age:'12'},{},{}]而這個結構又是由一個string解析來的。所以不能包含如下字元[',",{,}]最後發現定位字元分行符號都不行。\t,\r,\n。這個整整用了2天才找出來。。好了貼代碼
參照資料
http://www.json.org/
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: "peter@pan.de" }, { name: "Molly", to: "ssa" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { 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: "info@donalds.org" }, { name: "Donnie Darko", to: "dd@timeshift.info" }, { name: "Quake The Net", to: "ss" }, { name: "Dr. Write", to: "ss" }, { name: "Mc_xueyong", to: "123sao@qq.com" }, { name: "Dota", to: "IceFrog@bug.com" }, { name: "Dota", to: "IceFrog@bug.com" }, { name: "Dota", to: "IceFrog@bug.com" }, { name: "Dota", to: "IceFrog@bug.com" } ]; $(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(); }}
運行效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
