2011-06-29 48 views
1

我試圖擴展jQuery UI自動完成類似谷歌的搜索字段,其中頂部建議的結果(即任何不是request.term)中的其餘文本被添加到用戶輸入的字符串的結尾不同的顏色。將建議的結果添加到jQuery UI自動完成輸入?

我已經計劃通過使用相對定位在原始輸入後面放置一個尺寸相同的透明div來實現此目的,並將頂部匹配結果放置在此div中的顏色較淺。

我的問題是,訪問匹配結果數組的正確方法。我的方法是如下(精簡爲例):

$(function() { 
    var tags = [ 
     "One", 
     "Two", 
     "Three" 
    ]; 
    $("input").autocomplete({ 
     source: tags, 
     open: function() { 
      // var topResult = HOW TO ACCESS? 
      $('#divForText').text(topResult); 
     } 
    }); 
}); 

任何人都可以闡明如何匹配的結果訪問數組中的第一個值?

回答

2

這裏是你能做到這一點的一種方法:

$("input").autocomplete({ 
    source: function(request, response) { 
     var filtered = $.ui.autocomplete.filter(tags, request.term) 
      , first = filtered.length ? filtered[0] : null; 

     if (first) { 
      $("#divForText").text(first); 
     } else { 
      $("#divForText").empty(); 
     } 

     response($.ui.autocomplete.filter(langs, request.term)); 
    } 
}); 

基本上,這是用的source的版本,需要一個函數作爲參數。該功能只是使用filter method that autocomplete uses internally,然後更新內容。

下面是一個工作示例:http://jsfiddle.net/UGsHR/75/

相關問題