2

我有一个在用户初始化应用程序后下载的产品目录。我希望能够使用 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

先感谢您。:)

4

1 回答 1

1

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

通过在单个单词的开头找到您的查询来完成匹配：

搜索“a”将排在第二位，因为它是数据集中第二个条目，其中“arab”以“a”开头。所以“hon”会匹配“Hong Kong”，但“ong”没有匹配。“rael”与“Israel”等不匹配。 注意，在您的情况下，“WC2430L-SB”将被拆分为与“sb”匹配的两个“单个”单词“WC2430L”和“SB”。

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

在您的情况下，您将需要远程选项，例如：remote: '../data/films/queries/%QUERY.json',. 您的数据库来自，$("#ProductSearch").data("url")因此您将使用此 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 是表示数据基础值的字符串，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。

于 2013-09-23T22:02:19.743 回答