JQuery+Asp.net+Webservice组成的Autocomplete示例

毛坯版：

 

代码

function  reload() { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InitPage); }
  function  InitPage() {
             var  json  =  getJson();
             var  data  =  eval( ' ( '   +  json  +   ' ) ' );
            $( ' #<%= txtAudit.ClientID %> ' ).autocomplete(data, {
                width:  150 ,
                max:  50 ,
                minChars:  1 ,
                cacheLength:  20 ,
                delay:  150 ,
                matchContains:  true ,
                autoFill:  false ,
                scrollHeight:  300 ,
                formatItem:  function (row, i, max) {
                     return  row.Name;
                },
                 //                 formatMatch: function(row, i, max) {
                 //                     var txt = .val();
                 //                     return itemCheck(row, txt);
                 //                 },
                formatResult:  function (row) {
                     return  row.EmployeeName;
                }
            }).result( function (event, item) {
                 var  AuditID  =  $( ' #<%= hAuditID.ClientID %> ' );
                AuditID.val(item.ID);
            });
            data  =   null ;
        }
             function  getJson() {
                 var  res;
                $.ajax({
                    async:  false ,
                    type:  " POST " ,    // 访问WebService使用Post方式请求
                    contentType:  " application/json " ,  // WebService 会返回Json类型
                    url:  " ../WebService/WebService.asmx/GetEmployeeList " ,  // 调用WebService的地址和方法名称组合 ---- WsURL/方法名
                    data:  " {} " ,        // 这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到      
                    dataType:  ' json ' ,
                    success:  function (result) {
                        res  =  result.d;
                    },
                    error:  function (result, status) {  // 如果没有上面的捕获出错会执行这里的回调函数
                         if  (status  ==   ' error ' ) {
                            alert( " error: "   +  result);
                        }
                    }
                });
                 return  res;
            }
            $().ready( function () {
                reload(); 
                InitPage();
            });

待完善后，再形成新版，暂且记下。