自动补全文本框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title>google.html</title>
            <meta http-equiv="content-type" content="text/html;charset=GBK">
            <script type="text/javascript" src="js/jquery-1.3.2.js" charset="GBK"></script>

           <script type="text/javascript">
               var line = 0;
               var oldValue = '';
               function del() {
                   if ($("#newDiv")) {
                       $("#newDiv").remove();
                       line = 0;
                   }
               }

               $(document).ready(function() {
                   //文本框失去焦点时层消失
                       $(document.body).click(function() {
                          del();
                       });
               });

               function vchange() {
                  //alert("value change");
                   del();

                   //定位DIV
                   var top = $("#key").offset().top;
                   var left = $("#key").offset().left;
                   var newDiv = $("<div/>").width($("#key").width() + 6).css(
                           "position", "absolute").css("backgroundColor", "white")
                           .css("left", left).css("top", top + $("#key").height() + 6)
                           .css("border", "1px solid blue").attr("id", "newDiv");

                   /*过滤非法字符输入*/
                   if($("#key").value != ""){
                       //alert(oldValue);

                       /*过滤同名多次查询*/
                       if ($("#key").val() != oldValue) {
                           oldValue = $("#key").val();
                           var url = 'tsearch.action';
                           var params = {
                                   //POST参数编码处理
                               key : encodeURI($("#key").val())
                           };
                           jQuery.post(url, params, callbackFun, 'json');
                       }
                       $(document.body).append(newDiv); //添加DIV
                   }

                   if ($("#key").val() == "") {
                       $("#newDiv").remove();
                   }
               }

               //回调函数
               function callbackFun(data) {
                   var table = $("<table width='100%'/>").attr("cellpadding", "0").attr(
                           "cellspacing", "0");
                   if (data.result == "") {
                       //alert("你的关键字有误！");
                       var tr = $("<tr/>");
                       var td1 = $("<td/>").html("记录为空").css("fontSize", "12px")
                       .css("margin", "5 5 5 5");
                      tr.append(td1);
                       table.append(tr);
                       $("#newDiv").append(table);
                   } else {
                       var array = data.result.split(",");
                       for ( var i = 0; i < array.length - 1; i++) {
                           //alert(array[i]);
                          var tr = $("<tr/>").css("cursor", "pointer").mouseout(
                                   function() {
                                       $(this).css("backgroundColor", "white").css(
                                               "color", "black");
                                   }).mouseover(
                                   function() {
                                       $(this).css("backgroundColor", "blue").css("color",
                                               "white");
                                   }).click(function() {
                               $("#key").val($(this).find("td").eq(0).html());
                               del();
                           });

                           var td1 = $("<td/>").html(array[i]).css("fontSize", "12px")
                                   .css("margin", "5 5 5 5");
                           tr.append(td1);
                           table.append(tr);
                           $("#newDiv").append(table);
                       }
                   }
               }
         </script>
       </head>

       <body>
         <h1>Google搜索</h1>
          <div style="margin-top: 20px; margin-left: 30px">
             请输入搜索关键字:
              <input name="key" id="key" onkeyup="vchange()" style="width: 300">
              <input type="button" value="Goolge一下">
          </div>
      </body>
</html>  下载jquery-1.3.2.js
放js文件夹下保存HTMl看效果

jQuery Autocomplete 一句话的事~<script type="text/javascript">
var websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
$("#website").autocomplete(websites);
});
</script>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
<div id="content"></div>

顺便说一下要网上下载 autocomplete.js

Mark!还有一种方法：ACT的AutoCompleteExtender
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/autocomplete/autocomplete.aspx

后台返回json数据就可以~

我给你说说哈。页面上有个文本框。
<asp:TextBox runat="server" ID="txtuaMtrCode" />这里有段js代码给上面的文本框加个自动完成的事件$(document).ready(function () {
     $("#<%=txtuaMtrCode.ClientID %>").autocomplete(
                "get.data?Class=Ironmes.Biz.Interface.IEasProductMaterialManager&Method=GetByMatIdComplete&Para=null&Type=get&Entity=null",
                            {
                                max: 10,
                                scroll: true,
                                width: 140,
                                dataType: "json",
                                autoFill: true,
                                maxItemsToShow: 10,
                                minChars: 1,
                                matchSubset: 1,
                                cacheLength: 1
                            }
                );
});
然后这个请求回去我写的一个httpHandlers里面执行方法        public string GetByMatIdComplete(string MatId)
        {
            if (MatId == "") return " ";
            if (!Utils.IsSafeSqlString(MatId)) return " ";
            StringBuilder sb = new StringBuilder();
            string sql = "SELECT * FROM I_EAS_PRODUCT_MATERIAL WHERE UPPER(Mat_Id) LIKE '%" + MatId.ToUpper() + "%'";
            IList<IEasProductMaterial> list = GetBySql(sql);
            if (list.Count == 0) return "";
            for (int i = 0; i < list.Count; i++)
            {
                sb.Append(list[i].Mat_Id + "\n");
            }
            return sb.ToString();
        }完整的过程就这样。
需要有几点说明的是
第一：要先有jquery框架，
然后还要有jquery.autocomplete这个插件，我就不找了百度一下吧。
最后要说的就是用户在文本框输入的时候传到后台的文本框的值怎么获取呢，string q = Request.QueryString["q"];这样。当时比较着急  没有发现这个地方  导致纠结了很久

调试易

自动补全文本框

解决方案 »