Jquery 使用“；预取”；，但是与“；远程”；JSON

我一整天都在挣扎。 我的typeahead搜索表达式非常适合远程json数据。 但当我尝试使用与预取数据相同的json数据时，建议是空的。在点击第一个符号后，我得到一条预定义的消息“找不到任何t…”，结果为空

这是我的剧本：

function initialTypeaheadTest(){
    var mo_selector = $('*[data-moT="mysearch"]');
    var engine = new Bloodhound({
        limit: 10
        ,prefetch: {url:'/api/action/getjsontest'}
        //,remote: {url:'/api/action/getjsontest'}
        ,datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name')
        ,queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    engine.clearPrefetchCache(); //  only for test purposes
    engine.initialize();

    mo_selector.typeahead(
        {
            hint: true,
            highlight: true,
            minLength: 1
        }, {
        name: 'engine',
        displayKey: 'name',
        source: engine.ttAdapter(),
            templates: {
                empty: [
                    '<div class="empty-message">',
                    'unable to find anything that match the current query',
                    '</div>'
                ].join('\n'),
                suggestion: Handlebars.compile([
                        '<div id="{{value}}"><p style="max-height:100%;"><strong>{{title}}</strong></p>',
                        '<span style="font-size:12px;">{{year}}</span></div>'
                    ].join(''))
            }
    });
}

原始路径：mattopen.com/api/action/getjsontest

对我来说，一切看起来都很好。json数据格式良好。所有字符串（例如标记中的字符串）也用双引号引起来。 为什么远程数据工作但预取不工作

有人能给我指出正确的方向吗？

---

谢谢

除了正在设置的

标记器

，您的设置中的一切都很好。由于要在数据数组中返回json对象类型，因此必须指定json对象中要标记的属性/字段。在代码中指定

name

，但json类型不包含

name

。如果将其从

name

更改为

title

，则一切正常，然后搜索

title

字段

换行：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name')

致：

这是假设要使用

标题

作为搜索索引的字段。如果希望搜索其他字段/属性，请将其更改为数组中列出的对象类型中存在的该字段/属性的名称

如果您想使用您在对象中提供的令牌，您可以通过提供一个函数来实现这一点。将行

datumTokenizer

替换为以下内容：

,datumTokenizer: function (yourObj) {
    return yourObj.tokens; // returns the tokens array in your object
}

顺便说一下，默认的

Bloodhound.tokenizers.obj.whitespace

意味着它将尝试用空格分割字符串。这也是为什么您在上一个tokens实现中没有看到它的原因，因为我假设您的

tokens

字段将始终具有您想要的完整字符串

从

datumTokenizer–一个带有签名（datum）的函数，用于将数据转换为字符串标记数组。必需的

我还添加了

足够

，并将其设置为1，这会告诉引擎，如果至少返回了1个项目（在本例中是从预取返回的），则不需要访问服务器

足够–如果内部搜索索引提供的基准数量不足，则将使用remote来回填调用#search触发的搜索请求。默认值为5

此外，为了进行测试，您可以在站点根目录中的磁盘上创建一个文件（称之为

prefetchData.json

），将json数据文本直接复制到问题中列出的文件中，然后更改url以直接指向该文件

prefetch: {url:'/prefetchData.json'}

下面是完整的工作代码和上面提到的更改。现在，如果您键入

J

，您应该会返回两个结果

function initialTypeaheadTest(){
    var mo_selector = $('*[data-moT="mysearch"]');
    var engine = new Bloodhound({
        limit: 10
        ,sufficient:1
        ,prefetch: {url:'/prefetchData.json'}
        //,remote: {url:'/api/action/getjsontest'} // left it commented out to prove it works
        ,datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title')
        ,queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    engine.clearPrefetchCache(); //  only for test purposes
    engine.initialize();

    mo_selector.typeahead(
        {
            hint: true,
            highlight: true,
            minLength: 1
        }, {
        name: 'engine',
        displayKey: 'name',
        source: engine.ttAdapter(),
            templates: {
                empty: [
                    '<div class="empty-message">',
                    'unable to find anything that match the current query',
                    '</div>'
                ].join('\n'),
                suggestion: Handlebars.compile([
                        '<div id="{{value}}"><p style="max-height:100%;"><strong>{{title}}</strong></p>',
                        '<span style="font-size:12px;">{{year}}</span></div>'
                    ].join(''))
            }
    });
}

函数initialTypeaheadTest（）{
var mo_选择器=$（'*[data moT=“mysearch”]”）；
var引擎=新警犬({
限额：10
，足够：1
，预取：{url:'/prefetchData.json'}
//，remote:{url:'/api/action/getjsontest'}//将其注释掉以证明其有效
，datumTokenizer:Bloodhound.tokenizers.obj.whitespace（'title'））
，queryTokenizer:Bloodhound.tokenizers.whitespace
});
engine.clearPrefetchCache（）；//仅用于测试目的
engine.initialize（）；
mo_选择器，前面键入(
{
提示：没错，
推荐理由：没错，
最小长度：1
}, {
名称：“引擎”，
displayKey:'名称'，
来源：engine.ttAdapter（），
模板：{
空的：[
'',
“找不到与当前查询匹配的任何内容”，
''
].join（'\n'），
建议：车把([
“
{{{title}}
”，
“{{year}”
].加入（“”）
}
});
}

prefetch: {url:'/prefetchData.json'}

function initialTypeaheadTest(){
    var mo_selector = $('*[data-moT="mysearch"]');
    var engine = new Bloodhound({
        limit: 10
        ,sufficient:1
        ,prefetch: {url:'/prefetchData.json'}
        //,remote: {url:'/api/action/getjsontest'} // left it commented out to prove it works
        ,datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title')
        ,queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    engine.clearPrefetchCache(); //  only for test purposes
    engine.initialize();

    mo_selector.typeahead(
        {
            hint: true,
            highlight: true,
            minLength: 1
        }, {
        name: 'engine',
        displayKey: 'name',
        source: engine.ttAdapter(),
            templates: {
                empty: [
                    '<div class="empty-message">',
                    'unable to find anything that match the current query',
                    '</div>'
                ].join('\n'),
                suggestion: Handlebars.compile([
                        '<div id="{{value}}"><p style="max-height:100%;"><strong>{{title}}</strong></p>',
                        '<span style="font-size:12px;">{{year}}</span></div>'
                    ].join(''))
            }
    });
}