I'm trying to use Twitter Bootstrap's typeahead javascript's updater option to retrieve multiple values for the same row then display one column on same selected row on the input box and the other column on another. Unfortunately I cannot seem to find out how below code is not working to update the input box which has an id of ProductName.

$('#ProductName').typeahead({
                source: function(query,process){
                    var query = {query:query};
                    return $.post('/products/ajax_search_product_by_name',query,function(data){
                        return process(data.options);
                    },"json");
                },
                minLength: 3,
                items: 50,
                updater: function(item){
                    lastIndex = item.lastIndexOf('-');
                    length = item.length;

                    var product_id;
                    var product_name;
                    product_id = item.substr(lastIndex + 1, length);
                    product_name = item.substr(0,lastIndex);
                    document.getElementById('ProductName').value = product_name;
                    console.log(product_name);
                }

I read in the documentation that the item has the scope of the typeahead instance:

The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.

So I tried this instead of using DOM selector but it doesn't work either. I also tried jQuery way of $('#ProductName').val(product_name) but no luck.

Am I missing something here?

I'm trying to use Twitter Bootstrap's typeahead javascript's updater option to retrieve multiple values for the same row then display one column on same selected row on the input box and the other column on another. Unfortunately I cannot seem to find out how below code is not working to update the input box which has an id of ProductName.

$('#ProductName').typeahead({
                source: function(query,process){
                    var query = {query:query};
                    return $.post('/products/ajax_search_product_by_name',query,function(data){
                        return process(data.options);
                    },"json");
                },
                minLength: 3,
                items: 50,
                updater: function(item){
                    lastIndex = item.lastIndexOf('-');
                    length = item.length;

                    var product_id;
                    var product_name;
                    product_id = item.substr(lastIndex + 1, length);
                    product_name = item.substr(0,lastIndex);
                    document.getElementById('ProductName').value = product_name;
                    console.log(product_name);
                }

I read in the documentation that the item has the scope of the typeahead instance:

The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.

So I tried this instead of using DOM selector but it doesn't work either. I also tried jQuery way of $('#ProductName').val(product_name) but no luck.

Am I missing something here?

• javascript
• twitter-bootstrap

1 Answer 1

You are missing something here :) The updater method isn't supposed to set the value into the input, just to return it. The actual value setting is done after the updater method is called. I believe that if you'll end your updater method with:

return product_name;

It should work fine.