我们如何在 Typeahead.js 中设置遥控器?

Posted

技术标签:

【中文标题】我们如何在 Typeahead.js 中设置遥控器?【英文标题】:How do we set remote in Typeahead.js? 【发布时间】:2014-02-27 02:22:09 【问题描述】:

在以前的版本中我可以这样做:

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

但自从0.10 更新以来,typeahead.js 要求我们定义source,我无法使其工作。如何在不定义数据集函数的情况下定义远程?

【问题讨论】:

【参考方案1】:

Typeahead.js 0.10.0 版现在使用称为建议引擎的单独组件来提供建议数据。 Typeahead.js 附带的建议引擎称为Bloodhound。

因此,您不能“定义远程而无需定义数据集函数”。

可以在此处找到使用远程数据源的示例(我正在查询 TheMovieDb API,例如尝试搜索“Aliens”):

http://jsfiddle.net/Fresh/UkB7u/

代码在这里:

// 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()
);

请注意过滤器功能如何让您从重要的 JSON 数据源中选择要用作预先输入建议的内容。


Typeahead 0.11.1 更新

对于那些使用较新版本的 typeahead 的人,可以在此处找到基于原始问题的工作示例:

http://jsfiddle.net/Fresh/bbzt9hcr/

相对于Typeahead 0.10.0,新版本(0.11.1)有以下区别:

“过滤器”功能已重命名为“转换”。 无需在 Bloodhound 对象上调用 initialize,也无需在将其分配给远程源时调用 ttAdapter()。 现在需要在远程选项哈希中指定通配符(例如 %QUERY)。

【讨论】:

这很可悲,因为bloodhound 提供的功能远远超出了我的需要。在 0.9.3 之前它曾经非常简单 官方documentation提到我们可以使用自定义函数source。我想这会更简单,前提是我们能够弄清楚如何。 我同意 zuhaib 的观点,我认为 Bloodhound jst 使预输入变得更加困难并且有点臃肿。 bloodhound 的功能在之前的 typeahead.js 版本中就有,只是加上了 jQuery 插件。在 v0.10 中,我将两者分离,以允许不需要高级建议引擎的开发人员定义自己的数据源。因此,API 并不那么简单——我希望在即将发布的版本中解决这个问题。 Bloodhound 引擎让一切变得超级复杂。我只需要一个工作的自动完成,而不是一个建议引擎。 #OverEngineering。【参考方案2】:

你可以这样做:

$('input#keywords').typeahead(
    highlight: true,
,

  name: 'brands',
  display: 'value',
  source: function(query, syncResults, asyncResults) 
    $.get('/search?q=' + query, function(data) 
      asyncResults(data);
    );
  
)

来源:Using Typeahead.js without Bloodhound

【讨论】:

干杯!最后一个例子如何在没有猎犬的情况下做到这一点 现在你可以做相反的事情并展示如何在没有预先输入的情况下(更新查询网址),即只有 Bloodhoudhnd Typescript 版本需要 asyncResults!(data); (感叹号)【参考方案3】:

如果你想使用 ajax POST 数据而不是 GET 数据来进行更多受控的 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()
);

【讨论】:

对象不支持属性或方法'clearRemoteCache' 可以在最新版本中更改。我去年使用了这个功能,它没有错误。

以上是关于我们如何在 Typeahead.js 中设置遥控器?的主要内容,如果未能解决你的问题,请参考以下文章

如何在大型数据库中使用 typeahead.js

如何使用最新的 typeahead.js 库呈现 JSON 响应

如何使用 Typeahead.js 隐藏 div

Typeahead.js - 在多个属性值中搜索

我们如何在 uitableview 单元格中设置标签约束?

我们如何在道场 TreeGrid 中设置子级?