Can't display the selected item in the text input field with twitter-bootstrap typeahead

Question

I'm using bootstrap's typeahead for auto complete

I can successfully get a list of items from server and see a drop-down list for suggestion words using following code:

    $('.search-field').typeahead({
        source: function( query, process ){
            var queryParameters = form_params(document.getElementById("search"));
            var inputid = this.$element.attr('id');
            $.getJSON(
                "GET DATA From SERVER"
                    }));    
                });                 
        },
        minLength: 1,         
        updater:function(item){
            var id = this.$element.attr('id');
            $('#'+id).val(item);
            $('#'+id).text(item);
            console.log($('#'+id));
            instantSearch();                
        }  
   });

the problem is in the updater. When I select one item in the drop down list, the item parameter is the correct string I selected. I want to display the selected item in the input text field, however nothing happens. Both

    $('#'+id).val(item);

and

    document.getElementById('id').value = item;

failed.

Does anyone know how to set the value of a text input field in bootstrap's typeahead updater?

Answer 1

Dynamically setting the selector is difficult, I am not sure you can do it but worth a go: try:

var itemSelect = "'#" + id + "'";
$(itemSelect).val(item);

OR

var itemSelect = document.getElementById(id);
itemSelect.value(item);