Clear textbox after select jquery typeahead.js

Question

Thanks to the wonderful suggestions listed on SO I was able to hack out a type ahead that will update a table when selected. The last step I need to do is clear the textbox on/during/after the selection. I have tried adding things to the table onchange event, intercepting the select event, etc. nothing seems to work. The only other reference I can find here for this does not have an answer. There are responses for autocomplete but I cant seem to adapt them either. Any help would be greatly appreciated.

    $(document).ready(function () {

    var ds = [
           @if (ViewData.ModelState.IsValid)
             {
                 var index = 0;
                 foreach (var person in Model)
                 {
                     var jaUser = "{ name: \" " + person.UserName + "\", mobi: \"" + person.MobilePhone + "\" }";
                     if (index > 0) { jaUser = ',' + jaUser; }

                                   @Html.Raw(jaUser)                                       
                     index++;
                 }
             }
    ];

    var d = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: ds
    });
    d.initialize();

    $('#contactSearch').typeahead(
{
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'd',
    displayKey: 'name',
    source: d.ttAdapter(),
    templates: {
        empty: 'not found', //optional
        suggestion: function (el) {
            return "<span onclick=\"addUser2list('" + el.name + "');\"><img src='" + el.mobi + "' />" + el.name + "</span>"
        }
    }
}
);


});


function addUser2list(mobnum){
    if (mobnum.length > 0){
        row = $("<tr></tr>");
        col1 = $("<td>col1</td>");
        col2 = $("<td>"+ mobnum +"</td>");
        col3 = $("<td>col3</td>");
        row.append(col1, col2, col3).prependTo("#mytable");
        //$('#contactSearch').val('');
    }
} 

example - you type "da" in the text box, 3 names appear in the drop down, you select 1 and it is prepended to the table above. Once that happens, I need the text box to be clear, currently it shows the name you selected and you have to manually delete it. For some unknown reason the jsfiddle isnt updating the table, but in my local code it works fine, I just need to know how to clear the "contactSearch" box automatically.

Answer 1

You can use typeahead:selected to capture selecting item event from dropdown. There are more events that can be used.

typeahead:selected – Triggered when a suggestion from the dropdown menu is selected. The event handler will be invoked with 3 arguments: the jQuery event object, the suggestion object, and the name of the dataset the suggestion belongs to.

on('typeahead:selected', function(obj, datum){ //datum will be the object that is selected 
    myTypeahead.typeahead('val','');
    addUser2list(datum);
});

$('.typeahead').typeahead('val',''); will empty the value of the textbox.

Here is a DEMO

Hope this helps.