jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – Twitter使用“prefetch”时没有结果,但使用“远程”JSON大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我整天都在苦苦挣扎.
我的先行搜索表达式与远程json数据完美配合.
但是当我尝试使用与预取数据相同的json数据时,建议是空的.在点击第一个符号后,我得到预定义的消息“无法找到任何东西…”以获得空结果.

这是我的脚本:

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="{{@R_673_6084@}"><p style="max-height:100%;"><strong>{{titlE}}</strong></p>','<span style="font-size:12px;">{{year}}</span></div>'
                    ].join(''))
            }
    });
}

那就是我的json:

[{
"year":"02 Feb 2013 at 00:40 by anonymous","title":"JavaScript HTML DOM Changing HTML Content","value":"1","tokens":["JavaScript","HTML","DOM","Changing","Content"]
},{
"year":"02 Feb 2013 at 00:42 by anonymous","title":"WDR.de","value":"2","tokens":["WDR.de"]
},{
"year":"02 Feb 2013 at 00:46 by anonymous","title":"Nachrichten,aktuelle Schlagzeilen und Videos - n-tv.de","value":"3","tokens":["Nachrichten","aktuelle","Schlagzeilen","und","Videos","n","tv.de"]
},{
"year":"02 Feb 2013 at 00:55 by anonymous","title":"JavaScript RegExp Object","value":"5","RegExp","Object"]
},{
"year":"15 Feb 2013 at 23:24 by anonymous","title":"DotnetNuke Module Car LisTing Module","value":"8","tokens":["DotnetNuke","Module","Car","LisTing","Module"]
},{
"year":"08 Feb 2014 at 01:08 by advertiser","title":"Empfehlung","value":"1000","tokens":["Empfehlung"]
}]

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

对我来说,一切看起来都不错. json数据形成良好.所有字符串(例如在标记中)也用双引号引用.
为什么远程数据有效但预取不是?

有人能指出我正确的方向吗?
谢谢

解决方法

除了正在设置的标记生成器之外,设置中的所有内容都很好.因为要在数据数组中返回json对象类型,所以必须指定要标记化的json对象中的属性/字段.在您的代码中指定名称,但您的json类型不包含名称.如果您将其从名称更改为标题,则一切都按预期工作,然后搜索标题字段.

换线:

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

至:

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

这是假设您要使用title作为搜索索引的字段.如果您希望搜索其他字段/属性,请将其更改为数组中列出的对象类型中存在的该字段/属性名称.

如果要使用对象中提供的标记,可以通过提供完全相同的函数来实现.将行datumTokenizer替换为:

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

便说一下,认的Bloodhound.tokenizers.obj.whitespace意味着它将尝试拆分带有空格的字符串.这也是你在最后一个标记实现中没有看到它的原因,因为我假设你的标记字段总是有你想要的整个字符串.

Bloodhound Documentation

我还添加了足够的并将其设置为1,这告诉引擎如果返回至少1个项目(在这种情况下来自预取),则不需要访问服务器.

此外,为了测试,您可以在站点的根目录中创建磁盘上的文件(让我们称之为prefetchData.json),将您的json数据文本直接复制到您在问题中列出的文件中,然后将URL更改为直接指向它.

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

以下是完整的工作代码,其中包含上述更改.现在如果你输入J,你应该得到2个结果.

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'),'<span style="font-size:12px;">{{year}}</span></div>'
                    ].join(''))
            }
    });
}

大佬总结

以上是大佬教程为你收集整理的jquery – Twitter使用“prefetch”时没有结果,但使用“远程”JSON全部内容,希望文章能够帮你解决jquery – Twitter使用“prefetch”时没有结果,但使用“远程”JSON所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。