当前位置: 代码迷 >> ASP.NET >> !AJAX的autocompleteextender控件实现自动输入一定需要Web Service
  详细解决方案

!AJAX的autocompleteextender控件实现自动输入一定需要Web Service

热度:10698   发布时间:2013-02-25 00:00:00.0
在线等!AJAX的autocompleteextender控件实现自动输入一定需要Web Service?
autocompleteextender控件实现自动输入一定需要Web Service吗?
看到书上说可以用本页方法来实现
具体如何做?
请教高手

------解决方案--------------------------------------------------------
参考1

参考2
------解决方案--------------------------------------------------------
也可以用jquery 去实现啊

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      <html>          <head>              <title>google</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/>")("记录为空").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)());                                 del();                             });                                                          var td1 = $("<td/>")(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>
  相关解决方案