使用 Bootstrap3-typeahead 将对象传递给 onSelect答案

【问题标题】：Passing an object to onSelect using Bootstrap3-typeahead使用 Bootstrap3-typeahead 将对象传递给 onSelect
【发布时间】：2015-01-17 16:25:22
【问题描述】：

BootStrap3-TypeAhead

大家好，我很难弄清楚我应该如何将一个比默认值更多的对象传递给 onSelect 以获得更广泛的使用。这是我的代码，任何帮助将不胜感激！

$("input[type='text']").typeahead({
    onSelect: function(item) {
        // Do things with the item object here.
    },
    items: 10,
    ajax: {
        url: "modules/scripts/Search.php",
        timeout: 500,
        triggerLength: 1,
        method: "POST",
        preDispatch: function (str) {
            return {
                String: str,
                State: $("#"+$("#"+InputBox).attr("data-place")+"StateText").attr("data-sc")
            }
        },
        preProcess: function (data) {
            if (data.success === false) { return false; }
            // I think I'd create the item object here, or pass it along?

            var DD = [];
            $.each(data, function(key, value) {
                DD.push(value['City']+" - "+value['Zip']);
                TempArr[value['ID']] = data[key];
            });

            return DD;
        }
    }
});

【问题讨论】：

标签： php jquery ajax twitter-bootstrap bootstrap-typeahead

【解决方案1】：

您似乎正在使用 jQuery-UI 自动完成语法。 Typeahed 使用 Bloodhound 建议引擎。检查Typeahead documentation。 Hearing Typeahead custom-event: typeaead:selected 让您检索 jQuery 事件对象、建议对象以及建议所属数据集的名称。

【讨论】：

你是对的。一旦我切换到 Bloodhound，我就能解决这个问题。谢谢！

【解决方案2】：

我最终使用.remote.filter: function(obj) {} 选项解决了这个问题。这是一个片段：

var AjaxOptions = {
    type: "POST",
    cache: false,
    data: { limit: 10 },
    beforeSend: function(jqXHR, settings){
        // Manipulate settings.data to send more information than just the query string.
    },
    complete: function(data) {
        // If desired, you could do a 'how long this query took' display here.
    }
}

var InputArea = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.val); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    remote: {
        cache: false,
        url: 'scripts/Query.php?q=%QUERY',
        filter: function (InputArea) {
            return $.map(InputArea, function (data) {
                // Do whatever you want with 'data', then return it

                return {
                    foo: bar,
                    arnold: data.palmer
                };
            });
        },
        ajax: AjaxOptions,
    }
});

【讨论】：