制作自动提示匹配项输入框

来源：互联网发布：乐高淘宝代购编辑：程序博客网时间：2024/05/22 02:08

平时用百度，输入一个字后都有匹配的选项让你选择。想做一个这样的东西查看资料发现要用到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();    }}

运行效果