Question

这是我的要求：我需要一个用户输入文本框，当用户输入一些文本时，它必须显示来自本地数据的建议以及远程数据（结果来自基于输入文本的服务器）。当用户重新输入不同的文本时，它必须再次在本地搜索，再次调用服务器以获取新数据。

我尝试使用twitter typeahead。最初我能够显示来自本地和远程数据的建议，但只有一次因为typeahead没有进行另一次远程调用，因为它已经在其内存中预取了数据。然后我尝试在每个用户输入上进行destorying并重新初始化typeahead（仅当用户输入与前一个不同时，此检查已经存在）。但我收到了以下错误：

“TypeError：this。$ menu is null”

有谁可以告诉我这个问题的原因是什么？下面是我的代码示例（这些是我创建的测试页面，用于解决问题）：

预先输入初始化属性 -

var props = {
            template:'<div>{{name}}_{{id}}</div>',
            local:[
                {id:"val1", name:"india"},
                {id:"val2", name:"indiana"},
                {id:"val3", name:"abcindjgaja"}
            ],
            limit:10000,
            valueKey:'name',
            cache:false,
            remote:{
                url:<MYURL>,
                beforeSend:function (jqXHR, settings) {
                    settings.url += $("#myTI").val();  //myTI is id of input text box
                },
                filter:function (data) {
                    var dataSet = [];
                    for (var i = 0; i < data.length; i++) {
                        if ((data[i].name.toLowerCase()).indexOf($("#myTI").val().toLowerCase()) != -1) {
                            dataSet.push({
                                name:data[i].name,
                                id:data[i].id
                            });
                        }
                    }
                    return dataSet;
                }
            },
            engine:{
                compile:function (template) {
                    return {
                        render:function (ctx) {
                            var temp = Handlebars.compile(template);
                            return temp(ctx);
                        }
                    }
                }
            }
        };

初始化/重新初始化的逻辑 -

$("#myTI").keyup((function () {
            return function (e) {
                if (window[window.text]) {
                    clearTimeout(window[window.text]);
                }
                window.text = $("#myTI").val();
                window[window.text] = window.setTimeout(process, 250);

                function process() {
                    var dataFound = false;
                    for (var key in window.dataMap) {
                        if (!window.dataMap.hasOwnProperty(key)) {
                            continue;
                        }
                        if (window.text.indexOf(key) != -1) {
                            dataFound = true;
                            window.dataSetName = window.dataMap[key];
                            updateTypeahead();
                            break;
                        }
                    }
                    if (!dataFound) {
                        window.dataSetName = "typeahead" + parseInt(Math.random() * 1000, 10);
                        window.dataMap[window.text] = window.dataSetName;
                        updateTypeahead();
                    }
                }
            }
        }()));
        if (!window.tyepahead) {
            updateTypeahead();
        }

        function updateTypeahead() {
            if (window.tyepahead) {
                window.tyepahead.typeahead('destroy');
            }
            props.name = window.dataSetName;
            window.tyepahead = $("#myTI").typeahead(props);
        }

Answer 1

我认为在您的情况下不需要销毁和重新初始化。只需强制输出预先不要缓存remote来电（您将cache: false放在错误的位置）：

var props = {
    template:'<div>{{name}}_{{id}}</div>',
    local: [
        {id:"val1", name:"india"},
        {id:"val2", name:"indiana"},
        {id:"val3", name:"abcindjgaja"}
    ],
    limit: 10000,
    valueKey: 'name',
    remote: {
        url: <MYURL>,
        cache: false, // move cache: false to here
        beforeSend: function (jqXHR, settings) {
            settings.url += $("#myTI").val();  //myTI is id of input text box
        },
        filter: function (data) {
            var dataSet = [];
            for (var i = 0; i < data.length; i++) {
                if ((data[i].name.toLowerCase()).indexOf($("#myTI").val().toLowerCase()) != -1) {
                    dataSet.push({
                        name:data[i].name,
                        id:data[i].id
                    });
                }
            }
            return dataSet;
        }
    },
    engine: {
        compile:function (template) {
            return {
                render:function (ctx) {
                    var temp = Handlebars.compile(template);
                    return temp(ctx);
                }
            }
        }
    }
};

工作小提琴：http://jsfiddle.net/hieuh25/LPgv5/1/

希望它有所帮助。

重新初始化typeahead的问题

1 个答案: