1

我第一次使用 twitter typeahead.js，我试图做一些我认为很简单但我不知道如何做的事情。我希望通过预先输入的建议列表结果将用户转发到特定的 URL。我想使用多个数据集和要存储在 JSON 文件中的 url。

例如（使用改编的 typeahead.js 示例代码）：

CSS：

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

HTML：

<div id="multiple-datasets">
  <input class="typeahead" type="text" placeholder="NBA and NHL teams">
</div>

JS：

var nbaTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/nba.json'
});

var nhlTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/nhl.json'
});

nbaTeams.initialize();
nhlTeams.initialize();

$('#multiple-datasets .typeahead').typeahead({
  highlight: true
},
{
  name: 'nba-teams',
  displayKey: 'team',
  source: nbaTeams.ttAdapter(),
  templates: {
    header: '<h3 class="league-name">NBA Teams</h3>'
  }
},
{
  name: 'nhl-teams',
  displayKey: 'team',
  source: nhlTeams.ttAdapter(),
  templates: {
    header: '<h3 class="league-name">NHL Teams</h3>'
  }
});

NHL.JSON：

[{ "team": "Dallas Stars", "url": "stars.html" },{ "team": "Los Angeles Kings", "url": "kings.html" },{ "team": "Phoenix Coyotes", "url": "coyotes.html" },{ "team": "San Jose Sharks", "url": "sharks.html" }]

NBA.JSON：

[{ "team": "Boston Celtics", "url": "celtics.html" },{ "team": "Dallas Mavericks", "url": "mavericks.html" },{ "team": "Brooklyn Nets", "url": "nets.html" },{ "team": "Houston Rockets", "url": "rockets.html" }

因此，如果用户键入“rockets”，那么他们可以单击列表中的“Houston Rockets”建议，并将被定向到rockets.html。我不确定如何让 javascript 将建议转换为 JSON 中的相应链接。

任何帮助将不胜感激。

谢谢

4

1 回答 1

0

Typeahead has an event typeahead:selected, which indicates the selected item from within the autocomplete results, try this :

jQuery(document).ready(function() {
var check = false;

jQuery('input[name="searchInputID"]').typeahead({
    name: 'autocomplete',
    remote: '/typeahead//autocomplete/%QUERY',
    limit: 20,
    valueKey: 'name',
}).on('typeahead:selected', function(event, datum) {
    check = true;
    jQuery('input[name="searchInputID"]').val(datum.name);
    window.location = datum.url;
});
}

Let me know if it helps.

于 2014-08-02T03:04:29.890 回答