Question

HY！我正在使用twitter bootstraps typeahead：

我正在调用一个返回json_encode响应的页面页面返回一个名称和一个ID，

我希望输入型列表会显示名称列表，当我选择其中一个名字将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

抱歉＆＃34; resurect＆＃34;这篇文章，但我会疯了！

如果你们中的一些人在使用这些示例代码时遇到问题（他们都没有工作，所有人都回来了＃34;未定义＆＃34;而不是显示名称

添加

displayKey: 'name',

更换课程＆＃39; name＆＃39;通过远程源返回的标签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;
    }
});

Answer 4

我注意到在使用此代码时，如果匹配包含字母'st'，则预先输入建议包括typeahead建议中的样式标记。

例如建议的匹配将显示

style =“padding：10px; font-size：1.5em;”＆gt; standard

而不是

标准

我将替换功能更改为：

replace: function (string) {
  return String.prototype.replace.apply(this.name, arguments);
}

显然你失去了额外的格式，但它并没有在'st'匹配中中断（我认为它也会在'di'或div标签的其他子串中断。

Answer 5

当我尝试处理用户名和id时，我遇到了同样的问题。我有一个棘手的修复方法，但后来我用适当的解决方案修复了它。

看看这个，

$('#search').typeahead({
 source: function(query, process) {
 var $url = "/controller/function/list_users/?q="+query;
 var $datas = new Array;
 $datas = [""];
 $.ajax({
 url: $url,
 dataType: "json",
 type: "GET",
 success: function(data) {
 $.map(data, function(data){
 var group;
 group = {
 id: data.id,
 name: data.user_name,
 toString: function () {
 return JSON.stringify(this);
 //return this.variable;
 },
 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.name) != 'undefined') {
 value += ' <span class="pull-right muted">';
 //value += this.name;
 value += '</span>';
 }
 return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1em;">' + value + '</div>', arguments);
 }
 };
 $datas.push(group);
 });
process($datas);
 }
 });
 },
 property: 'user_name',
 items: 10,
 minLength: 2,
 updater: function (item) {
 var item = JSON.parse(item);
 $('#hiddenId').val(item.id);
 $('#username').val(item.name);
//you can perform your actions here
//example</p>
//location = '/controller/function/'+item.id+'/edit';
 //document.redirect = location;
}
});

也看看这个链接。

http://vaisakhvm.wordpress.com/2013/07/31/twitter-bootstrap-typeahead-process-multiple-values/

Answer 6

我的解决方案是：

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

就我而言，product.id是一个代码，因此在typeahead控件中显示它很有用。通过这种方式，我避免了重复名称风险。

bootstrap typeahead返回名称和id

6 个答案: