typeahead.js 从头开始​​搜索 [英] typeahead.js search from beginng

问题描述

我有一个产品目录，我在用户初始化应用程序后下载了这些目录.我希望能够使用 twitter 的预先输入来搜索目录.基本代码如下:

I have a catalog of products that I download after the user initializes the application. I want to be able to search the catalog using twitter's typeahead. The basic code is as follows:

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

到目前为止，这很好用，但是，我想显示与用户首先输入的内容相匹配的结果.例如，我输入:SB"，我得到以下 10 个结果:

So far this works great but, I would like to show results matching what the user types first. For example, I type: "SB", I am getting the following 10 results:

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

我想先获得以下匹配项...

I would like to get the following matches first...

• SBB24
• SBB27
• SBB30
• SBB33
• SBB36

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

Everything I have found when searching seems like it is for bootstrap 2.x's "typeahead" component, I am implementing the latest https://github.com/twitter/typeahead.js and http://getbootstrap.com

先谢谢你.:)

推荐答案

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

The typeahead.js don't allow a filter on a local dataset as i understood. See the first example on http://twitter.github.io/typeahead.js/examples/ (country search) The result are the first 10 (depeding on your limit) result matching your query. Dataset for this example is here: http://twitter.github.io/typeahead.js/data/countries.json

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

Matching is done by finding your query a the start of a single word:

搜索a"将在第二个列出阿拉伯联合酋长国"，因为它是数据集中阿拉伯"以a"开头的第二个条目.所以hon"会匹配Hong Kong"，但ong"没有匹配项.rael"不匹配以色列"等.注意在您的情况下，WC2430L-SB"将分为两个单个"词WC2430L"和SB"，它们与sb"匹配.

Search for "a" will have "United Arab Emirates" listed second, cause it is the second entry in your dataset where "arab" starts with an "a". So will "hon" match "Hong Kong", but "ong" don't have a match. "rael" don't match "Israel" etc. NOTE in your case "WC2430L-SB" will be split in two 'single' words "WC2430L" and "SB" which match "sb".

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

When you apply a filter on your local dataset like local: filter(_.values(res)), filter will only be applied on initialization and not on every search / input.

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

In your case you will need the remote option, like: remote: '../data/films/queries/%QUERY.json',. Your database came from $("#ProductSearch").data("url") so you will use this url as your remote parameter.

如果 $("#ProductSearch").data("url") 是 http://www.yourdomain.com/database 你应该编码类似:

In the case that $("#ProductSearch").data("url") is http://www.yourdomain.com/database you should code something like:

    <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

Where http://www.yourdomain.com/database?q=%QUERY should return a list of data, see: https://github.com/twitter/typeahead.js

组成数据集的各个单元称为数据.这数据的规范形式是具有值属性和令牌属性.value 是表示底层证券的字符串数据和标记的值是单字串的集合这有助于 typeahead.js 将数据与给定的查询匹配.

The individual units that compose datasets are called datums. The canonical form of a datum is an object with a value property and a tokens property. value is the string that represents the underlying value of the datum and tokens is a collection of single-word strings that aid typeahead.js in matching datums with a given query.

这些数据应该是 json 编码的，并且包含或以值开头，并且在开头带有 %QUERY.

These data should be json encode and contains or start with values with having your %QUERY at the begin.

如果您无法操作 http://www.yourdomain.com/database 的结果，您可以为它编写一个本地过滤器.

In the case you can't manipulate the results of http://www.yourdomain.com/database you could write a local filter for it.

示例:http://www.yourdomain.com/database ($("#ProductSearch").data("url")) 似乎返回一个 (json) 对象原因你在上面使用 _.values.

Example: http://www.yourdomain.com/database ($("#ProductSearch").data("url")) seems to return an (json) object cause you use _.values on it.

这将在 php 中模拟您的数据库(在我的情况下可在 http://testdrive/database.php 上使用)，database.php:

This will mimic your database in php (availible on http://testdrive/database.php in my case), 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:

And the filter 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.

Now your dropdown will only contain results which start with your input. In stead of the local option remote is not static the remote url is called for every input again.

这篇关于typeahead.js 从头开始​​搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！