无需额外过滤即可返回所有带有预输入的远程匹配项

Posted 2023-05-07

【中文标题】无需额外过滤即可返回所有带有预输入的远程匹配项

【英文标题】：Return all remote matches with typeahead without extra filtering

【发布时间】：2016-10-03 18:56:11

【问题描述】：

似乎无法弄清楚用typeahead禁用过滤。基本上我只需要它的自动完成（或相当下拉的搜索提示）功能。我正在进行邮政编码搜索，结果邮政编码不一定与查询的邮政编码匹配。如何使其显示所有匹配，而不会对那些额外过滤？

以下是我的代码：

var dealers = new Bloodhound(
    datumTokenizer: function (d) 
        return Bloodhound.tokenizers.whitespace(d);
    ,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 
        url: '/form/find-dealer?postalCode=',
        prepare: function (query, settings) 
            settings.url += encodeURIComponent(query);
            settings.type = 'POST';
            settings.contentType = "application/json; charset=UTF-8";
            return settings;
       
    
);

$('input[name=postalCode]').typeahead(
    minLength: 3
, 
    name: 'dealers',
    display: function (data) 
        return data.title;
    ,
    source: dealers.ttAdapter()
);

注意：我知道以这种方式进行邮政编码搜索似乎有点尴尬，但设计器的目的是让用户可以通过经销商名称和邮政编码交替搜索。

附加信息： typeahead.bundle.js - v0.11.1

【问题讨论】：

“生成的邮政编码不一定与查询的邮政编码匹配”看起来无论用户输入什么，您都想显示所有邮政编码......“我如何让它显示所有匹配项”似乎就像你想匹配用户类型的那样。请澄清你想要的东西。演示可能很有用。此外，您使用的是哪个版本的插件？ span>

@ yezzz，typeahead.bundle.js - v0.11.1。我想显示所有通过 AJAX 调用返回的对象（所有其他魔法已经在服务器端发生）

【参考方案1】：

似乎不可能在没有任何（匹配）查询的情况下显示所有内容： https://github.com/twitter/typeahead.js/issues/1308

虽然有些人正在尝试使用 minlength=0 像这样： https://github.com/twitter/typeahead.js/issues/1251

而且它看起来在旧版本中是可能的： https://github.com/twitter/typeahead.js/pull/719

顺便说一句，插件不再开发，手册不完整。可以在这个 fork 中找到改进的：https://github.com/corejavascript/typeahead.js/tree/master/doc

话虽如此，您最好使用另一个自动建议，或者像 select2 这样的插件，它默认显示结果并且可以使用外部资源。

【讨论】：

感谢您的研究和回答，但我仍然相信通过为数据集 (jQuery#typeahead(options, [*datasets])) 提供自定义函数作为 source 是可行的。

不客气。当你成功时告诉我。祝你好运。

【参考方案2】：

如果您想向 AJAX 发送查询并从数据库中获取数据并为 typehead 的结果添加所有 JSON 结果（您有一个带有数据库的数据过滤器并使用 AJAX 和 JSON 发送干净的数据，但是 type head 有额外的过滤和不要显示任何东西或你的一些数据），你必须这样做：

打开 bootstrap-typeahead.js 并找到

item.toLowerCase().indexOf(this.query.toLowerCase())

并将其替换为：

item.toLowerCase().indexOf(item.toLowerCase())

你能显示所有来自 Ajax JSON 的结果吗...

【讨论】：

我在 js 文件中找不到：item.toLowerCase().indexOf(this.query.toLowerCase())。它到底在哪里？

【参考方案3】：

不漂亮，因为库已经分叉并且不再由创建者正式支持，但这个修复为我做了https://github.com/twitter/typeahead.js/pull/1212。基本上在远程模式下，它会返回所有匹配项，这实际上是我所看到的正确行为。

这个 SO 线程帮助了 twitter typeahead ajax results not all shown