使用TypeAhead使用不同於JSON數據的值而不是displayKey使用Typeahead

我已經開始使用Typeahead.js，並且正在努力想出一種允許用戶鍵入和搜索公司名稱的方法，一旦選擇輸入關聯的公司代碼。使用TypeAhead使用不同於JSON數據的值而不是displayKey使用Typeahead

以.json文件：

[{ 
    "company_name": "Facebook", 
    "code": "fb", 
}, { 
    "company_name": "Google", 
    "code": "goog", 
}, { 
    "company_name": "Yahoo", 
    "code": "yhoo", 
}, { 
    "company_name": "Apple", 
    "code": "aapl", 
}, { 
    "company_name": "Royal Mail", 
    "code": "rmg.l", 
}]

.js文件腳本：

var stocks = new Bloodhound({ 
    datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.code); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 3, 
    prefetch: { 
     url: 'javascripts/stockCodes.json', 
     filter: function(list) { 
      return $.map(list, function(stock) { 
       return { 
        code: stock 
       }; 
      }); 
     } 
    } 
}); 

stocks.initialize(); 

$('.typeahead').typeahead(null, { 
    name: 'stocks', 
    displayKey: 'code', 
    source: stocks.ttAdapter() 
});

目前，這只是顯示的代碼列表，當用戶在輸入字段。但是，我想知道是否有辦法允許他們在code上進行搜索，但是一旦選定，文本框中的值將變爲company_name？這甚至可以使用這個插件。任何幫助將不勝感激。

謝謝！

來源

2014-02-19 user1779796

通過添加名稱屬性源對象圍繞它的工作你能夠改變你的數據結構？ – Tomanow

@Tomanow是的。我只是覺得這個結構很有效率。謝謝 – user1779796

我剛更新了我的答案。現在應該更準確。 – Tomanow

如果我正確地讀，我相信這是你想要什麼：

var stocksData = [{ 
    "Facebook": "fb", 
}, { 
    "Google": "goog", 
}, { 
    "Yahoo": "yhoo", 
}, { 
    "Apple": "aapl", 
}, { 
    "Royal Mail": "rmg.l", 
}, ]; 

var stocks = new Bloodhound({ 
    datumTokenizer: function (d) { 
        for (var prop in d) { 
         return Bloodhound.tokenizers.whitespace(d[prop]); 
        } 

    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 3, 
    local: stocksData, 
}); 

stocks.initialize(); 

$('input').typeahead(null, { 
    name: 'stocks', 
    displayKey: function(stocks) { 
     for (var prop in stocks) { 
      return prop;  
     } 
    }, 
    source: stocks.ttAdapter() 
});

你當然會想改變當地就像你曾經爲JSON文件預讀/遙控器。

UPDATE

FIDDLE

來源

2014-02-20 00:20:46 Tomanow

謝謝你的回答，非常感謝。我只是開始使用上面的提琴中提供的代碼。我不確定是否正確解釋了問題，但我正在嘗試弄清楚如何將相關值放入輸入文本框中，而不是鍵值。例如，輸入'Facebook'應該在下拉列表中顯示Facebook，但是一旦選中，文本框的值就會顯示'fb'而不是'Facebook'。我曾嘗試調整所提供的代碼，但尚未設法合併此功能。感謝您對此的幫助。 – user1779796

您需要使用'displayKey'變量。見下文複製 - 粘貼從預輸入文檔：

displayKey - 對於給定的建議對象，確定它的字符串表示。在選擇建議後設置輸入控件的值時將使用此選項。可以是關鍵字符串，也可以是將建議對象轉換爲字符串的函數。默認爲value。然後

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

您的特定代碼將是這樣的：

var stocks = new Bloodhound({ 
     datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.code); }, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     limit: 3, 
     prefetch: { 
      url: 'javascripts/stockCodes.json', 
      filter: function(list) { 
       // This should not be required, but I have left it incase you still need some sort of filtering on your server response 
       return $.map(list, function(stock) { return { code: stock.code, company_name: stock.company_name }; }); 
      } 
     } 
    }); 

    stocks.initialize(); 

    $('.typeahead').typeahead(null, { 
     name: 'stocks', 
     displayKey: function(stock) { 
      return stock.company_name; 
     }, 
     source: stocks.ttAdapter() 
    });

我對我自己的網站非常相似的要求，我這個沒有問題的工作。儘管如此，我還沒有嘗試過這個特殊的例子，所以讓我知道它是否有效。

請記得撥打stocks.clearPrefetchCache();清除緩存，以便更輕鬆地跟蹤錯誤。

來源

2014-06-13 08:00:15 bblue

我不是jQuery/JavaScript-Guru。所以我更喜歡這個簡單的方法。只是爲了瞭解我以後看我的代碼時所做的事情......

感謝Eric Saupe我發現了一個聰明的解決方案：

//JSON FILE 
[ 
    { 
     "company_name": "Facebook", 
     "code": "fb", 
    }, 
    { 
     "company_name": "Google", 
     "code": "goog", 
    }, 
    { 
     "company_name": "Yahoo", 
     "code": "yhoo", 
    }, 
    { 
     "company_name": "Apple", 
     "code": "aapl", 
    }, 
    { 
     "company_name": "Royal Mail", 
     "code": "rmg.l", 
    }, 
]

// JS腳本

var stocks = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('company_name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: 'javascripts/stockCodes.json' 
    }); 

    stocks.initialize(); 

    $('.typeahead').typeahead(
     null, { 
     name: 'stocks', 
     displayKey: 'company_name', 
     source: stocks.ttAdapter() 
    }).on('typeahead:selected', function(event, data){    
     $('.typeahead').val(data.code);   
    });

只需使用作爲docs on github描述的預輸入自定義事件。

希望，這有助於（當它只是爲我自己後來的參考）。

JSFIDDLE

來源

2014-06-20 18:47:25 Tobse

你也想處理'typeahead：autocompleted'。 – Alok

看起來像最好的解決方案，但JSFIDDLE不再工作。點擊時，它將寫入整個公司名稱。 – NLemay

它是'typeahead：selected'還是'typeahead：select'？官方文件說後者。無論哪種方式，我都無法啓動活動。我添加了alert（data.code）;'到你的小提琴中，它也沒有開火。什麼應該是正確的方式？ –

displayKey用於指示哪個鍵應當在下拉列表中和在輸入字段中要顯示的用戶選擇了條目後。

如果您希望顯示在下拉列表中的條目爲不同的，那麼輸入字段中會出現什麼結果，您需要使用自定義模板。

從documentation：

suggestion - 用於呈現一個建議。如果設置，則這必須是預編譯模板。相關的建議對象將作爲上下文。缺省值displayKey包裝在p標籤中，即 <p>{{value}}</p>。

像這樣的東西應該工作：

$('.typeahead').typeahead(null, { 
    name: 'stocks', 
    displayKey: 'company_name', 
    source: stocks.ttAdapter(), 
    templates: { 
     suggestion: function (stock) { 
      return '<p>' + stock.code + '</p>'; 
     } 
    } 
});

提交的模板將用來顯示在下拉列表中stock.code，而stock.company_name將在輸入字段中顯示的用戶選擇一個條目後。

來源

2014-08-25 11:36:12 Esseb

有同樣的問題，無法讓它使用display或displayKey屬性。

  $.each(stocks, function (i, item) { 
       item.name = item.company_name; 
      });

來源

2015-11-12 09:50:32 marco

添加需要在顯示參數中顯示的值：

$(".comp-search").typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1, 
    displayKey: 'company_name', 
}, { 
    source: engine.ttAdapter(), 
    templates: { 
     empty: ['<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'], 
     header: ['<div class="list-group search-results-dropdown">'], 
     suggestion: function (data) { 
      return '<a href="javascript:void(0);" class="list-group-item">' + data.company_name + '</a>'; 
     } 
    }, 
    display: function(data) { return data.company_name; } 
});

希望這是有益

來源

2017-07-17 13:34:34 ArtisanBay

使用TypeAhead使用不同於JSON數據的值而不是displayKey使用Typeahead

回答

相關問題