代码之家 › 专栏 › 技术社区 › ryan

typeahead.js从开始搜索

typeahead.js twitter-bootstrap-3 twitter-bootstrap

ryan · 技术社区 · 11 年前

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

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

到目前为止,这很有效,但我想显示与用户首先键入的内容相匹配的结果。例如,我键入:“SB”,得到以下10个结果:

WC2430L-某人
WC2430R-SB型
电话2730l-SB
WC2730R-SB型
电话3030l-SB

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

SBB24型
第27页
SBB30型
SBB33型
SBB36型

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

提前谢谢。:)

1 回复 | 直到 11 年前

Bass Jobsen 11 年前

正如我所理解的,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

组成数据集的各个单元称为基准。这个基准的规范形式是一个具有值属性和 tokens属性。value是表示基础的字符串数据和标记的值是单个字符串的集合帮助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);

和过滤器.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。