自動完成搜索...？可能使用jQuery？

HTML：

<form name="searchForm"> 
    <input type="text" id="Fruit" name="getFruit"/> 
</form>

的Javascript：

function Fruit(name, color){ 
    this.name = name; 
    this.color = color; 
}; 

var database = {}; 
database['banana'] = new Fruit("Banana", "Yellow"); 
database['apple'] = new Fruit("Apple", "Red"); 
database['orange'] = new Fruit("Orange", "Orange"); 
database['apple pear'] = new Fruit("Apple Pear", "Green");

我如何使用自動完成功能，因此，如果用戶鍵入「蘋果」，它會給他們一個選擇從下拉菜單中選擇「蘋果」或「蘋果梨」，並點擊它時填充表單文本框？當你嘗試輸入一些東西的時候，google會給出建議。

我在想我想使用jquery http://jqueryui.com/autocomplete/但我不知道如何實現它。

$("#Fruit").autocomplete({ 
     source: database // How would you implement this? 
    });

這不是我完整的代碼，但我最後一次張貼了我所有的代碼是太多閱讀，所以我創造了這個給剛剛的什麼，我試圖做一個例子。

來源

2013-02-12 Kamui

的[源選項]（http://api.jqueryui.com/autocomplete/#option-source）必須是一個陣列，串，或一個函數。你傳遞一個對象。 – jbabey 2013-02-12 18:44:53

您正處於正確的軌道上。 jQuery UI的自動完成小部件需要一組項目來進行選擇。我們可以使用jQuery的map方法將數據庫對象映射到一組鍵，然後將其用作自動完成源。

<form name="searchForm"> 
    <input type="text" id="Fruit" name="getFruit"/> 
</form> 

function Fruit(name, color){ 
    this.name = name; 
    this.color = color; 
}; 

var database = {}; 
database['banana'] = new Fruit("Banana", "Yellow"); 
database['apple'] = new Fruit("Apple", "Red"); 
database['orange'] = new Fruit("Orange", "Orange"); 
database['apple pear'] = new Fruit("Apple Pear", "Green"); 

var source = $.map(database, function(val, i) { 
    return i; 
}); 

$("#Fruit").autocomplete({ 
     source: source 
});

Try it out on jsFiddle!

來源

2013-02-12 18:46:57 Adam

太好了，謝謝！我不知道來源不可能是一個對象......你是一個救星！ – Kamui 2013-02-12 18:58:57

快速問題 - 如果我想訪問「名稱」部分（因爲他們使用大寫字母），我可以做一些像返回i.name？ – Kamui 2013-02-12 19:01:50

@Kamui它會返回'val.name'，但是你可以這樣做。 – Adam 2013-02-12 19:10:00

Twitter的引導有這個漂亮的jQuery插件，會替你：http://twitter.github.com/bootstrap/javascript.html#typeahead

只需使用

$(element).typeahead({ source: arrayOrFunction });

它是相當有據可查的，所以你應該能夠找到答案。 =）

jQuery UI的自動完成功能也以類似的方式做到這一點。只需傳遞一個字符串數組或一個函數，將查詢作爲第一個參數，並將回調作爲第二個參數，並使用自動完成選項調用回調。

來源

2013-02-12 18:45:09

自動完成搜索...？可能使用jQuery？

回答

相關問題