JavaScript实现在textbox输入时自动去数据库匹配并找出类似值列出，选择后记得将值填入本textbox及下一个textbox

1.

<script src='<%= Application["rootURL"] %>JS/jquery-1.4.1.min.js' type="text/javascript"></script>
<script src='<%= Application["rootURL"] %>JS/jquery.cookie.js' type="text/javascript"></script>
<script src='<%= Application["rootURL"] %>JS/jquery.autocomplete.js' type="text/javascript"></script>
<link rel="Stylesheet" href='<%= Application["rootURL"] %>JS/jquery.autocomplete.css' type="text/css"/>

<script language="javascript" type="text/javascript">
    
       var txtText7 = "#" + '<%= new DynamicControl(this, "Text7").ClientID%>'; 
       var url1 = '<%= Application["rootURL"] %>文件夹名/文件名.ashx';
       $(function () {
           $(txtText7).autocomplete(url1);  
       });
</script>

2.新建一个Generic Handler文件

using System;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data.Common;
using System.Diagnostics;

namespace 文件夹名{
    /// <summary>
    /// Summary description for 文件名
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class 文件名 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            if (!Sql.IsEmptyString(context.Request.QueryString["q"]))
            {
                DataTable result = new DataTable();
                string qName = context.Request.QueryString["q"].Trim();
                if (!String.IsNullOrEmpty(qName))
                {
                    result = GetCityName(qName, 10);
                }
                else
                {
                    return;
                }

                foreach (DataRow row in result.Rows)
                {
                    context.Response.Write(row["NAME"] + "\n");
                }
            }
            context.Response.End();

        }
     
        public static DataTable GetCityName(string sPrefix, int count)
        {
            DataTable dt = new DataTable();

            DbProviderFactory dbf = DbProviderFactories.GetFactory();
            using (IDbConnection con = dbf.CreateConnection())
            {
                string sSQL;
                sSQL = "select top {0} CityName+' ('+StateName+')' AS NAME  " + ControlChars.CrLf
                     + "  from USA_State_City      " + ControlChars.CrLf
                     + " where CityName like @NAME  " + ControlChars.CrLf
                     + " order by CityName asc      " + ControlChars.CrLf;

                using (IDbCommand cmd = con.CreateCommand())
                {
                    cmd.CommandText = string.Format(sSQL, count);
                    Sql.AddParameter(cmd, "@NAME", sPrefix + "%");
                    try
                    {
                        using (DbDataAdapter da = dbf.CreateDataAdapter())
                        {
                            ((IDbDataAdapter)da).SelectCommand = cmd;
                            da.Fill(dt);
                        }
                    }
                    catch (Exception ex)
                    {
                        SplendidError.SystemError(new StackTrace(true).GetFrame(0), ex);
                        return null;
                    }
                }
            }
            return dt;
        }



        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

3.重写jquery.autocomplete.js的selectCurrent方法

 

    function selectCurrent() {
        var selected = select.selected();
        if( !selected )
            return false;
        
        var v = selected.result;
        previousValue = v;
        
        if ( options.multiple ) {
            var words = trimWords($input.val());
            if ( words.length > 1 ) {
                var seperator = options.multipleSeparator.length;
                var cursorAt = $(input).selection().start;
                var wordAt, progress = 0;
                $.each(words, function(i, word) {
                    progress += word.length;
                    if (cursorAt <= progress) {
                        wordAt = i;
                        return false;
                    }
                    progress += seperator;
                });
                words[wordAt] = v;
                          v = words.join( options.multipleSeparator );
            }
            v += options.multipleSeparator;
        }
        
            var vals = $input.val().split(",");
            var txtval="";
            if (vals.length > 1) {
                for (k = 0; k < vals.length - 1; k++) {
                    txtval += vals[k]+", ";
                }
                txtval += v;            
            }
            else { txtval = v; }
            
            $input.val(txtval);
            hideResultsNow();
            
            var iPos = selected.data.toString().indexOf("(")
             
            var sName= selected.data.toString().substring(0,iPos);
           
          
           var IDendwith = $input.attr("ID").substring($input.attr("ID").lastIndexOf("_")+1);
            if (IDendwith=="TEXT7") {
               $input.val(sName);
               var txtStateID=IDendwith+1;
               var lenth=selected.data.toString().length-1;
               var sState=selected.data.toString().substring(iPos+1,lenth);             
               $input.parent().parent().next().children().children().val(sState);
            }
           else
            {
                $input.trigger("result", [selected.data, selected.value]);
            }
            
            return true;
    }