0

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

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

“类型错误：this.$menu 为空”

谁能告诉我这个问题的原因是什么？以下是我的代码示例（这些来自我为解决问题而创建的测试页面）：

预输入初始化属性 -

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);
        }
4

1 回答 1

0

我认为您的情况不需要销毁和重新初始化。只需强制预先输入不要缓存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/

希望能帮助到你。

于 2013-08-08T11:59:17.350 回答