Question

我有一个用户初始化应用程序后下载的产品目录。我希望能够使用twitter的typeahead搜索目录。基本代码如下：

$.post($("#ProductSearch").data("url"), function(res) {
    $("#ProductSearch").typeahead({
        name: 'Products',
        local: _.values(res),
    })
})

到目前为止，这种方法很有效，但我希望显示与用户首先匹配的结果相匹配的结果。例如，我输入：“SB”，我得到以下10个结果：

WC2430L-SB
WC2430R-SB
WC2730L-SB
WC2730R-SB
WC3030L-SB

我想先得到以下比赛......

SBB24
SBB27
SBB30
SBB33
SBB36

我在搜索时发现的一切似乎都是针对bootstrap 2.x的“typeahead”组件，我正在实施最新的https://github.com/twitter/typeahead.js和http://getbootstrap.com

提前谢谢你。：）

Answer 1

如我所知，typeahead.js不允许对本地数据集进行过滤。请参阅http://twitter.github.io/typeahead.js/examples/上的第一个示例（国家/地区搜索）结果是匹配查询的前10个（取决于您的限制）结果。此示例的数据集位于：http://twitter.github.io/typeahead.js/data/countries.json

通过将查询作为单个单词的开头来完成匹配：

搜索“a”会将“阿拉伯联合酋长国”排在第二位，因为它是数据集中的第二个条目，其中“arab”以“a”开头。因此，“荣誉”将匹配“香港”，但“ong”没有匹配。 “rael”与“以色列”等不匹配注意在您的情况下，“WC2430L-SB”将分为两个“单”字“WC2430L”和“SB”，与“sb”匹配。

在您的本地数据集上应用过滤器时，local: filter(_.values(res)),过滤器仅适用于初始化，而不适用于每次搜索/输入。

在您的情况下，您将需要远程选项，例如：remote: '../data/films/queries/%QUERY.json',。您的数据库来自$("#ProductSearch").data("url")，因此您将使用此网址作为远程参数。

如果$("#ProductSearch").data("url")是http://www.yourdomain.com/database，您应该编写类似的代码：

    <input class="typeahead" type="text" placeholder="products">

    $('.typeahead').typeahead({                                
        remote: 'http://www.yourdomain.com/database?q=%QUERY'
        limit: 10                                                                   
        });

http://www.yourdomain.com/database?q=%QUERY应返回数据列表，请参阅：https://github.com/twitter/typeahead.js

组成数据集的各个单元称为基准。该规范形式的数据是具有value属性和a的对象令牌财产。 value是表示底层的字符串 datum和tokens的值是单字符串的集合帮助typeahead.js匹配基准与给定的查询。

这些数据应该是json编码，包含或以％QUERY开头的值开头。

如果您无法操纵http://www.yourdomain.com/database的结果，则可以为其编写本地过滤器。

实施例： http://www.yourdomain.com/database（$("#ProductSearch").data("url")）似乎返回一个（json）对象，因为你在它上面使用_.values。

这将模仿php中的数据库（在我的案例中可用于http://testdrive/database.php），database.php：

<?php
$values = array('WC2430L-SB','WC2430R-SB','WC2730L-SB',
'SBB24','SBB27','SBB30','SBB33','SBB36','WC2730R-SB','WC3030L-SB');
echo json_encode((object)$values);

过滤器filter.php：

<?php
function filter($value)
{
    return (boolean)preg_match('/^'.$_GET['q'].'/i',$value);
}   
$values = (array)json_decode(file_get_contents('http://testdrive/database.php'));
$values = array_filter($values, "filter");
echo json_encode((object)$values);

现在你可以使用：

        $('.typeahead').typeahead({ 
        name: 'Products',                                   
        remote: 'filter.php?q=%QUERY'
        limit: 10                                                                   
        });

现在，您的下拉列表将仅包含以您的输入开头的结果。代替local选项remote不是静态的，再次为每个输入调用远程URL。

typeahead.js从头开始搜索

1 个答案: