使用Twitter引导类型前置来处理对象

I'm using the Bootstrap Typeahead plugin like so:

我使用Bootstrap Typeahead插件:

$('#Organisation').typeahead({
            source: function (query, process) {
                return $.get(AppURL + 'Organisations/Manage/SearchByName/',
                {
                    term: query
                },
                function (data) {
                    var results = [];
                    var fullResults = [];
                    $.each(data, function (index, item) {
                        results.push(item.label);
                        fullResults.push({
                            id: item.ID,
                            label: item.label
                        });
                    });

                    return process(results);


                });
            },
            updater: function (selection) {
                $('#OrganisationID').val(selection);
            }
        });

I have two returned arrays, this is because Typeahead ONLY wants a list of strings instead of an object. The second array contains both the label and id.

我有两个返回的数组，这是因为Typeahead只想要一个字符串列表而不是一个对象。第二个数组包含标签和id。

Once a user selects an item from the list I need to get the ID from this selection and then use it to insert into a hidden field. But the selection will just be the name, as the ID can't be passed through via Typeahead.

一旦用户从列表中选择一个项目，我需要从这个选择中获取ID，然后使用它插入隐藏字段。但是选择的只是名称，因为ID不能通过Typeahead传递。

Any ideas on how I can solve this?

有什么办法解决这个问题吗?

An example of the two returned arrays:

两个返回的数组的一个示例:

results: ["Organisation 1","Organisation 2"]

结果:["组织1”、“2”组织)

fullResults: [{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]

fullResults:[{“标签”:“组织1”、“ID”:2 },{“标签”:“组织2”,“ID”:1 }]

4 个解决方案

#1

After searching around a bit on the net I found this HowTo. In it they do what you want, but with no ajax.

在网上搜索了一会儿之后，我找到了这个方法。在它里面，他们做你想做的，但是没有ajax。

You should also be able to return a object, from the source function, but you would need to re-implement all the helper functions of typeahead.

您还应该能够从源函数返回一个对象，但是您需要重新实现typeahead的所有助手函数。

#2

You cannot normally use JSON objects directly within Bootstrap Typeahead (2.x), but you can easily tweak it to do so. The wording of this question should help for people to find this in one place. Other questions have asked similar things, but not identical to the way that you did.

通常不能直接在Bootstrap Typeahead (2.x)中使用JSON对象，但可以轻松地对其进行调整。这个问题的措辞应该有助于人们在一个地方找到它。其他的问题也问了类似的问题，但和你问的不一样。

var typeahead = control.typeahead({ /* ... */ }).data('typeahead');

// manually override select and render
//  (change attr('data-value' ...) to data('value' ...))
//  otherwise both functions are exact copies
typeahead.select = function() {
    var val = this.$menu.find('.active').data('value')
    this.$element.val(this.updater(val)).change()
    return this.hide()
};
typeahead.render = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).data('value', item)
        i.find('a').html(that.highlighter(item))
        return i[0]
    });

    items.first().addClass('active')
    this.$menu.html(items)
    return this
};

Other than that, you must override highlighter, matcher, sorter, and updater, but those can done via the options passed into the typeahead, where the passed in item(s) are now your JSON objects.

除此之外，您必须重写highlighter、matcher、sorter和updater，但是可以通过传递给typeahead的选项来完成这些操作，其中传入的项目现在是您的JSON对象。

When selecting items, updater is called, which is how you set the value and use the JSON data:

在选择项目时，调用updater，这是设置值和使用JSON数据的方式:

updater: function (item) {
    someGlobalValue = item.id;

    // must return a normal string; sets the textbox value
    return item.name;
}

This also means that you don't need to do anything fancy to associate, or otherwise "remember" the items external to Typeahead referenced example in the other answer. The most annoying part of the whole overriding process is rewriting the sorter in every use.

这也意味着您不需要做任何有趣的事情来关联，或者“记住”其他答案中Typeahead引用示例的外部项。整个重写过程中最烦人的部分是在每次使用时重写分选器。

#3

I have an ugly solution...

我有一个丑陋的解决方案……

I needed to be able to search into the title but to finally put the ID into the text input...

我需要能够搜索到标题，但是要把ID输入到文本输入中……

my JSON is

我的JSON

[
{"id": 1, "title": "Foo foo foo"},
{"id": 2, "title": "Bar bar bar"},
...
]

and my call...

和我的电话……

$(function() {
    $.get("path/to/data.json", function(data){
          $(".typeahead").typeahead({
              "source": data,
              "displayText": function(item){
                  // OMG ugly !!! :p
                  if (item.id == undefined) return item;
                  return item.title + ' (' + item.id + ')';  
              },
              "updater": function(item) {
                  return item.id;
              }});
    }, 'json');
});

All is working as usual but when you click on the selected item, only the id is put into the field...

一切正常，但当您单击选定的项目时，只有id被放入字段中……

done ! ugly but done...

完成了!丑陋但做…

Tested with https://github.com/bassjobsen/Bootstrap-3-Typeahead

测试与https://github.com/bassjobsen/Bootstrap-3-Typeahead

#4

Consider rewriting "matcher", "sorter", "updater" and "highlighter" functions just like it was described at https://*.com/a/14959406/593415

考虑重新编写“matcher”、“sorter”、“updater”和“highlighter”函数，就像https://*.com/a/14959406/593415中描述的那样

This really does a trick so that you could manipulate objects with Bootstrap Typeahead (2.x)

这真的是一个技巧，你可以用引导类型前置操作对象(2。x)

#1