使用ASp.Net webservice进行JQuery自动完成

时间:2011-10-11 07:54:17

标签: jquery jquery-autocomplete

我正在使用ASP.Net webservice开发JQuery Autocomplete。 我将ASP.Net webservice在JQuery(JSON)中调用下拉为

 $(document).ready(function () {
    $("#txtTest").autocomplete({ 
         source: function (request, response) {  
             $.ajax({  
                 type: "POST",  
                 contentType: "application/json; charset=utf-8", 
                 url: "Webservice.asmx/GetNames",
                 data: "{'prefix':'" + request.term + "'}",  
                 dataType: "json",  
                 async: true,  
                 success: function (data){  
                    response($.map(data, function(item)
                    { return item ; }));  
                },  
                error: function (result) {  
                   alert("Due to unexpected errors we were unable to load data");  
                }  
             });
         },  
         minLength:2
     });
 });

我正在将自动完成的输出作为

 {"First":"Steve","Second":"AK"}
 {"First":"Evet","Second":"EV"}
 {"First":"Stevens","Second":"SV"}

如何单独显示“First”项目(如Steve,Evet,Stevens)作为下拉自动完成的输出?

请帮助我!

3 个答案:

答案 0 :(得分:0)

您需要查看AutoComplete方法上的formatItem选项 - 试试这个

formatItem: function(row, i, n) {
      return row.First;
  }

答案 1 :(得分:0)

这可能会成功

   success: function (data)
    {  
        response($.map(data, function (item)
         {
             return { label: item.First, value: item.First}
         }))
    });

答案 2 :(得分:0)

看看我对这个问题的答案:Jquery Autocomplete 2 Fields

但在字段中使用您的值而不是“A”和“B”。

此外,您(可能)需要一个转换器来处理asp.net数据:

$.ajax({
    url: "Webservice.asmx/GetNames",
    dataType: "jsond",
    type: "POST",
    contentType: "application/json",
    converters: {
        "json jsond": function(msg)
        {
            return msg.hasOwnProperty('d') ? msg.d : msg;
        }
    },
...