bootstrap typeahead返回名称和id
海兰！ 我正在使用twitter bootstraps typeahead：
我正在调用一个页面，该页面返回带有json_encode的响应，页面返回一个名称和一个ID，
我希望typeahead列表会显示名称列表，当我选择其中一个名称来将id值写入隐藏字段时。
调用工作正常，写一个字段应该很容易。 我不知道该怎么做是如何将名称与id分开。
现在，当我搜索某些东西时，在suggesstion列表中我可以看到返回的结果如下：
name1：id1 name2：id2
我只想看到名字，但也要带上id的值。
我怎样才能做到这一点？
$(function(){ $("#typeahead_").typeahead( { source: function(query, process) { $.ajax({ url: '/getAjaxProducts', type: 'POST', data: 'query=' + query, dataType: 'JSON', async: true, success: function(data) { process(data); } }); } }); }); 包含名称/ 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文档看起来可能有点不同，因此您可以根据需要更改解析，但适用相同的一般策略。
很抱歉“复活”这篇文章，但我会疯了！
如果你们中的一些人在使用这些示例代码时遇到问题（他们都没有工作，所有人都返回“Undefined”而不是显示名称
只需添加
displayKey: 'name',
用您的远程源返回的标签var名称替换课程“名称”
（很难找到最新的样本，网上发现的大部分样本都是针对以前版本的typeahead而不是与新版本兼容……）
......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 += ' '; value += this.level; value += ''; } return String.prototype.replace.apply('' + value + '', 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; } });
我注意到在使用此代码时，如果匹配包含字母’st’，则预先输入建议包括typeahead建议中的样式标记。
例如，建议的匹配将显示
style =“padding：10px; font-size：1.5em;”>标准
代替
标准
我将替换function更改为：
replace: function (string) { return String.prototype.replace.apply(this.name, arguments); }
显然你失去了额外的格式，但它没有在’st’匹配中断（我认为它也会在’di’或div标签的其他子串中断。
当我尝试处理用户名和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 += ' '; //value += this.name; value += ''; } return String.prototype.replace.apply('' + value + '', 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 //location = '/controller/function/'+item.id+'/edit'; //document.redirect = location; } });
看看这个链接也。
http://vaisakhvm.wordpress.com/2013/07/31/twitter-bootstrap-typeahead-process-multiple-values/
我的解决方案是：
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控件中显示它很有用。 通过这种方式，我避免了重复名称的风险。