Bootstrap typeahead return name and id

Question

Hy! I use twitter bootstraps typeahead:

I call a page that returns a response with json_encode the page returns the name and identifier,

I want the typeahead list to show me a list of names, and when I select one of the names to enter the id value in a hidden field.

the call works fine, and writing a field should be easy. what I do not know what to do is how to separate the name from id.

Now, when I look for something, in the advesstion list I see returning results as follows:

name1: id1 name2: id2

I want to see only the names, but also carry the id value.

How can i do this?

$(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

A typical JSON document containing name and identifier pairs will look like this:

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

The strategy here is to create an object literal that maps names to identifiers when parsing the result, but only using the name to populate typeahead:

 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 } ); } ); 

Once the user selects an element from the head type, you can refer to the selected element with:

 $( '#product' ).val() 

and you can get the id associated with the selected item with:

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

From your question, it looks like your JSON document might be structured a little differently, so you will change the parsing as needed, but the same general strategy applies.

Answer 2

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

In updating the typeahead call, you can put the above code, which allows you to add the selcted value to the text field or where you should put its value in another hidden field.

The full ajax call is as follows:

 $('#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 3

Sorry for the "resurect" this post, but I will be crazy!

If some of you have problems using the sample code examples (none of them worked, everyone returned "Undefined" instead of showing the name

Just add

 displayKey: 'name', 

Replace the course name with the name of your shortcut var returned by your remote source

(It’s quite difficult to find the latest samples on it, most of the samples found on the network are for the previous typeahead version and are not compatible with the new ones ...)

Answer 4

When using this code, I noticed that if the match included the letters "st", sentences like headhead include a style tag in sentences like head.

For example, the proposed matches will display

style = "padding: 10px; font-size: 1.5em;" > standard

instead

standard

I replaced the replace function with this:

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

Obviously, you will lose the extra formatting, but it will not break into matches of "st" (I assume that it will also break on "di" or on other substrings of the div tag.

Answer 5

I had the same issue when I tried to process the username and id. I had a complicated fix, but later I fixed it with the correct solution.

Look at this,

 $('#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; } }); 

Take a look at this link.

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

Answer 6

My decision:

 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 } ); } ); 

In my case, product.id is code, so it is useful to display it in the head control. This way I avoided duplicating risk names.