首页 新闻 会员 周边 捐助

twitter typeahead文本自动补全JS库的问题

0
悬赏园豆:50 [待解决问题]

twitter typeahead是个非常好用的文本自动补全填充JS,功能用户在input输入关键字过,会出现列表用户点选补全(类似百度搜索框),引入我的网址,功能已经实现,还有个问题未解决,不知道怎么下手,请各位大哥帮忙看看。

我想实现当input失去焦点,就判断input内容是否在列表中,如果不在,则清空input(目的是input最后提交的内容必须是在列表选择的,不允许用户随便填)。
或者如何获得remote返回结果数组?我再写判断代码。

twitter typeahead官网:http://twitter.github.io/typeahead.js/examples/

我的代码:

//==搜索文本框变量=================
var vSouSuoInp = "",
arrTypeahead;

arrTypeahead = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "null",
        wildcard: '%QUERY',
        rateLimitBy: 'throttle',
        rateLimitWait: 2000
    }
});

//==搜索文本框变量赋值=================
$("#divMainContent").on("focus", ".typeahead", function () {
    let arrDataSousuo = $(this).data("sousuo").split(",");
    vSouSuoInp = arrDataSousuo[0];
    arrTypeahead.remote.url = arrDataSousuo[1] + '?key=%QUERY&vBiao=' + arrDataSousuo[2] + '&vZiDuan=' + arrDataSousuo[3] + '&vDISTINCT=' + arrDataSousuo[4];

    if ($(this).data("inset") == "0") {

        $('.typeahead').typeahead({
            minLength: 2,
            highlight: true
        }, {
            name: 'arr-Typeahead',
            limit: 10,
            display: 'value',
            source: arrTypeahead,
            templates: {
                notFound: '<span style="margin: 0 10px"><i class="icon-exclamation-sign"> </i>无匹配结果</span>'
            }
        });

        $(this).data("inset", "1");
        $(this)[0].focus();
    }else{
    
    console.log(arrTypeahead);
        
    };

});
cqwcns的主页 cqwcns | 初学一级 | 园豆:54
提问于:2019-10-14 18:00
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册