bootstrap typeahead返回名称和id

Question

海兰!我正在使用twitter bootstraps typeahead:

我正在调用一个页面,该页面返回带有json_encode的响应,页面返回一个名称和一个ID,

我希望typeahead列表会显示名称列表,当我选择其中一个名称来将id值写入隐藏字段时.

调用工作正常,写一个字段应该很容易.我不知道该怎么做是如何将名称与id分开.

现在,当我搜索某些内容时,在suggesstion列表中我可以看到返回的结果如下:

name1:id1 name2:id2

我只想看到名字,但也要带上id的值.

我怎样才能做到这一点？

 $(function(){
    $("#typeahead_<? print $key; ?>").typeahead(
        {
        source: function(query, process)
                    {
                    $.ajax({
                        url:    '/getAjaxProducts',
                        type:   'POST',
                        data:   'query=' + query,
                        dataType: 'JSON',
                        async: true,
                        success: function(data)
                                {
                                process(data);
                                }
                            });                 
                    }
        });
});

Answer 1

包含名称/ ID对的典型JSON文档将如下所示:

[
  {
    "id": 1
    "name": "firstName"
  },
  {
    "id": 2
    "name": "secondName"
  }
]

这里的策略是构建一个对象文字,在解析结果时将名称映射到ID,而只使用名称来填充类型:

var productNames = new Array();
var productIds = new Object();
$.getJSON( '/getAjaxProducts', null,
        function ( jsonData )
        {
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.name );
                productIds[product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
        } );

用户从预先输入中选择一个项目后,您可以使用以下内容引用所选项目:

$( '#product' ).val()

并且您可以获得与所选项目相关联的ID:

productIds[$( '#product' ).val()]

从您的问题来看,您的JSON文档看起来可能有点不同,因此您可以根据需要更改解析,但适用相同的一般策略.

Answer 2

很抱歉"复活"这篇文章,但我会疯了!

如果你们中的一些人在使用这些示例代码时遇到问题(他们都没有工作,所有人都返回"Undefined"而不是显示名称

只需添加

displayKey: 'name',

用您的远程源返回的标签var名称替换课程"名称"

(很难找到最新的样本,网上发现的大部分样本都是针对以前版本的typeahead而不是与新版本兼容......)

Answer 3

......updater: function (item) {
        var item = JSON.parse(item);
        console.log(item.name); 
        $('#VehicleAssignedTechId').val(item.id);       
        return item.name;
    }

在类型调用的更新程序中,您可以按上面的代码放置,允许您在文本框中添加选择的值,或者您必须将其值放在其他隐藏字段中.

完整的ajax调用如下:

$('#VehicleAssignedTechName').typeahead({
    source: function(query, process) {
        var $url =SITE_URL+ 'api/vehicle_techfield_typeahead/' + query + '.json';
        var $items = new Array;
        $items = [""];
        $.ajax({
            url: $url,
            dataType: "json",
            type: "POST",
            success: function(data) {
                console.log(data);
                $.map(data, function(data){
                    var group;
                    group = {
                        id: data.id,
                        name: data.name,                            
                        toString: function () {
                            return JSON.stringify(this);
                            //return this.app;
                        },
                        toLowerCase: function () {
                            return this.name.toLowerCase();
                        },
                        indexOf: function (string) {
                            return String.prototype.indexOf.apply(this.name, arguments);
                        },
                        replace: function (string) {
                            var value = '';
                            value +=  this.name;
                            if(typeof(this.level) != 'undefined') {
                                value += ' <span class="pull-right muted">';
                                value += this.level;
                                value += '</span>';
                            }
                            return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1.5em;">' + value + '</div>', arguments);
                        }
                    };
                    $items.push(group);
                });

                process($items);
            }
        });
    },
    property: 'name',
    items: 10,
    minLength: 2,
    updater: function (item) {
        var item = JSON.parse(item);
        console.log(item.name); 
        $('#VehicleAssignedTechId').val(item.id);       
        return item.name;
    }
});