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

這是從previous JQueryUI Autocomplete question, I asked的延續。不知道如何使用JQuery用戶界面自動完成... :(

這一次，我有我的數據返回......但我不知道怎麼我定義什麼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是嗎？）

來源

2010-09-13 Pure.Krome

這是我的工作示例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上設置一個斷點，看看會發生什麼。

來源

2010-09-13 12:57:28 rebelliard

@Rafael BELLIARD：歡呼的答案。是的，一直在使用Firebug進行遠程教育。現在..什麼是$ .map（..）???自動完成是否使用它創建的一些魔法HTML，遠離你和我..但需要一個值+ ID？另外，formatAutoComplete（..）方法是什麼？那該假設做什麼？ – 2010-09-13 13:03:33

@ Pure.Krome：$ map只是用於遍歷數組的一種奇特方法：http://api.jquery.com/jQuery.map/ – rebelliard 2010-09-13 13:10:57

@ Pure.Krome：formatAutocomplete（）對於簡單安裝不是必需的。我將它連接起來，因爲當自動完成文本框顯示item.Value時，我希望另一個文本框顯示item.Key，因此它只會執行$（「othertextbox」）.val（item.Id）; （if（ui.item））只是爲了檢查該項目不是空的，所以它不會崩潰。 – rebelliard 2010-09-13 13:13:06

此代碼爲我工作：

$("#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); } 
      }); 
    } 
});

來源

2013-04-07 14:57:53 Ram

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

回答

相關問題