不知道如何使用JQuery用户界面自动完成... :(

Question

这是从previous JQueryUI Autocomplete question, I asked的延续。

这一次，我有我的数据返回......但我不知道怎么我定义什么HTML显示和如何动态更新与我的结果HTML。

所以，这里是我的jQuery ....

Home.js

function AutoComplete(element) { 
    var cache = {}; 
    $(element).autocomplete({ 
     minLength: 2, 
     source: function (request, response) { 
      if (request.term in cache) { 
       response(cache[request.term]); 
       return; 
      } 
      else { 
       $.getJSON("/api/autocomplete/" + 
          encodeURIComponent(request.term), 
        function (data) { 
         cache[request.term] = data; 
         response(data); 
        }); 
      } 
     } 
    }); 
} 

，这在我看来是

Index.aspx

<script type="text/javascript"> 
    $(document).ready(function() { 
     AutoComplete("#searchQuestion"); 
    }) 
</script> 

有线了现在..我不知道我怎么告诉它使用一些（尚未进行）HTML/DIV /等。 ...然后填充该<ul>列表（我假设我扩展回调，上面..而不是调用这个response(data)方法.. wtf是吗？）

Answer 1

这是我的工作示例jQuery UI的自动完成。希望它能帮助：

var cache = {}; 
    $("#textbox").autocomplete({ 
     source: function(request, response) { 
     if (request.term in cache) { 
     response($.map(cache[request.term].d, function(item) { 
     return { value: item.value, id: item.id } 
     })) 
     return; 
     } 
     $.ajax({ 
     url: "/Services/AutoCompleteService.asmx/GetEmployees", /* I use a web service */ 
     data: "{ 'term': '" + request.term + "' }", 
     dataType: "json", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataFilter: function(data) { return data; }, 
     success: function(data) { 
     cache[request.term] = data; 
     response($.map(data.d, function(item) { 
      return { 
      value: item.value, 
      id: item.id 
      } 
     })) 
     }, 
     error: HandleAjaxError // custom method 
     }); 
     }, 
     minLength: 3, 
     select: function(event, ui) { 
     if (ui.item) { 
     formatAutoComplete(ui.item); // custom method 
     } 
     } 
    }); 

如果你不是现在这样做，得到Firebug。这对于web开发来说是非常宝贵的工具。你可以在这个JavaScript上设置一个断点，看看会发生什么。

Answer 2

此代码为我工作：

$("#Textbox").autocomplete({ 
    minLength: 2, 
    source: function(request, response) { 
      var term = request.term; 
      if (term in cache) { 
       response(cache[ term ]); 
       return; 
      } 

      var currentProject=$("#project option:selected").text(); 
      $.ajax({ 
        url: "url", 
        data: {term : request.term, IssueType :'Test', Project : currentProject}, 
        dataType: "json",  
        contentType: "application/json; charset=utf-8", 
        dataFilter: function(data) { return data; }, 
        success: function (data) { 
         var results = $.map(data, function(item){ 
          return { value: item.value, id: item.id }}); 
          cache[request.term] = results; response(results); } 
      }); 
    } 
});