Javascript 如何在Typeahead.js中设置远程？

在以前的版本中，我可以做到：

$('#search').typeahead({
  name: 'Search',
  remote: '/search?query=%QUERY'
});

但是由于

0.10

更新，typeahead.js要求我们定义

source

，这是我无法实现的。如何定义remote而不必定义dataset函数？

0.10.0版现在使用一个称为建议引擎的单独组件来提供建议数据。与Typeahead.js一起提供的建议引擎称为

因此，您不能“在不定义dataset函数的情况下定义remote”

使用远程数据源的示例（我正在查询MovieDB API，例如尝试搜索“外星人”）如下：

代码如下：

// Instantiate the Bloodhound suggestion engine
const movies = new Bloodhound({
  datumTokenizer: datum => Bloodhound.tokenizers.whitespace(datum.value),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d',
    // Map the remote source JSON array to a JavaScript object array
    filter: movies => $.map(movies.results, movie => ({
      value: movie.original_title
    }))
  }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
  displayKey: 'value',
  source: movies.ttAdapter()
});

注意filter函数如何允许您从一个非平凡的JSON数据源中选择要用作typeahead建议的内容

---

Typeahead 0.11.1的更新 对于使用较新版本typeahead的用户，可以在此处找到基于原始问题的工作示例：

关于Typeahead 0.10.0，新版本（0.11.1）有以下区别：

• “过滤器”功能已重命名为“转换”
• 不需要对嗜血犬对象调用initialize，也不需要在将其分配给远程源时调用ttAdapter（）
• 现在需要在远程选项散列中指定通配符（例如%QUERY）

  ---

如果要使用ajax POST数据而不是获取更多受控ajax调用的数据，可以使用以下结构：

var meslekler = new Bloodhound({
    datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.isim);
        },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'my_url_with_or_without_%query_token.php',
        ajax:{
            type:"POST",
            cache:false,
            data:{
                limit:5
            },
            beforeSend:function(jqXHR,settings){
                settings.data+="&q="+$('.tt-input').typeahead('val');
            },
            complete:function(jqXHR,textStatus){
            meslekler.clearRemoteCache();
            }
        }
    }
});
meslekler.initialize();
$('.typeahead').typeahead(null, {
    name:'meslekler',
    displayKey: 'isim',
    source: meslekler.ttAdapter()
});

---

嗯，你可以这样做：

$('input#keywords').typeahead({
    highlight: true,
},
{
  name: 'brands',
  display: 'value',
  source: function(query, syncResults, asyncResults) {
    $.get('/search?q=' + query, function(data) {
      asyncResults(data);
    });
  }
})

---

资料来源：

这很悲哀，因为

猎犬

提供的功能远远超出了我的需要。在0.9.3之前，它一直非常简单。官方提到我们可以使用自定义函数作为

源代码
。我想如果我们能够弄清楚如何做，那会更简单。我同意祖哈伊布的观点，我认为猎犬jst让typeahead变得更难，而且有点臃肿。猎犬的功能在以前版本的typeahead.js中就有，它只是与jQuery插件结合在一起。在v0.10中，我将两者解耦，以允许不需要高级建议引擎的开发人员定义自己的数据源。因此，API并没有那么简单——我希望在即将发布的版本中解决这个问题。猎犬引擎只是让一切变得超级复杂。我只需要一个工作自动完成，而不是一个建议引擎#过度工程，干杯！最后，举一个例子，说明如何在不使用typeahead的情况下完成（更新查询url），也就是说，只有bloodhoudhndTypescript版本需要异步结果！（数据）；（感叹号）对象不支持属性或方法“clearRemoteCache”，可以在最新版本中进行更改。我去年使用了这个函数，它工作正常。