（jQuery？）自動完成在兩行或更多行顯示？

Question

我使用了幾年的ajax自動完成腳本，爲腳本提供預選關鍵字。現在，我想擴展它以實際顯示（數據）變量的名稱，但可以擴展到100個字符。因此，結果需要在多個（至少兩個）行中的下拉框中顯示。

我發現了一個jQuery的自動完成插件，它的確如此：http://code.drewwilson.com/entry/autosuggest-jquery-plugin。

這一個：http://www.web2ajax.fr/2008/02/03/facebook-like-jquery-and-autosuggest-search-engine/

否則，沒有太多的東西在那裏，我的印象。

還有一個挑戰：我希望自動完成不僅可以在名稱的開頭搜索，而且可以在字段的任何部分進行搜索。 （我想，這是一種服務器端的東西，對嗎？）

你可以推薦任何穩定和不太花哨的解決方案嗎？

感謝您的任何提示和建議。

Answer 1

jQuery本身具有自動完成小部件。它會像你期待的那樣工作。檢查這個鏈接。

http://jqueryui.com/autocomplete/

http://jqfaq.com/category/widgets/autocomplete/

Answer 2

這裏是我是如何做到的使用jQuery UI的_renderItem方法： 注意，我必須打破長款到行50個字符的寬度。

$("#id_info").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      type: "POST", 
      url: "/api", 
      contentType: "application/json; charset=utf-8", 
      headers: {'X-CSRFToken': '{{ csrf_token }}'}, 
      timeout: 5000, 
      data: JSON.stringify({ 
       term: request.term, 
       task: 'search', 
      }), 
      success: response, 
      dataType: 'json', 
     }); 

    }, 
    minLength: 0, 
    select: function(event, ui) { 
     ui.item.value = ui.item.id; 
    } 
}).autocomplete("instance")._renderItem = function(ul, item) { 
    var width = 50; // num of characters 
    var broken_para = ''; 
    var pre_ind = 0; 
    var ind = item.label.indexOf(' ', width); 
    while(ind > 0){ 
    broken_para = broken_para + '<br>' + item.label.substring(pre_ind, ind); 
    pre_ind = ind; 
    ind = item.label.indexOf(' ', ind + width); 
    } 
    broken_para = broken_para + '<br>'; 

    return $("<li>") 
    .append(broken_para) 
    .appendTo(ul); 
}; 

這裏是一個useful link

Answer 3

我發現了一個簡單的解決方案：

$('.ui-autocomplete').css('max-width','25%');