Clear textbox after select jquery typeahead js

0 votes

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.

Jul 26 in Web Development by gaurav
• 17,580 points
19 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

Pure JS equivalent of Jquery eq()

To get the element index in the ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
17 views
0 votes
1 answer

$("#select option:second").val() jquery - keep select second value of select box option

Yes, you want the special jQuery eq() selector. ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
7 views
0 votes
1 answer

jQuery get value of select onChange

Try this- $('select').on('change', function() { alert( this.value ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
21 views
0 votes
1 answer

jQuery get value of select onChange

To get the value and text of ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
18 views
0 votes
0 answers
0 votes
0 answers
0 votes
1 answer

How can I use wow.js and animate.css without affecting SEO?

there are two animation classes in MDBs ...READ MORE

answered Feb 22 in Others by narikkadan
• 11,280 points
514 views
0 votes
0 answers

Bootstrap - Uncaught TypeError: Cannot read property 'fn' of undefined

I am using jquery, backbonejs, underscorejs, and ...READ MORE

May 10 in JQuery by Kichu
• 19,040 points
428 views
0 votes
1 answer
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP