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, 2022 in Web Development by gaurav
• 23,260 points
1,316 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, 2022 in Web Development by rajatha
• 7,680 points
1,419 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, 2022 in Web Development by rajatha
• 7,680 points
3,423 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, 2022 in Web Development by rajatha
• 7,680 points
599 views
0 votes
1 answer

jQuery get value of select onChange

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

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
1,128 views
0 votes
0 answers
0 votes
1 answer

"JQuery not defined" throwing error after installing angular-slickgrid

1. Your CDN-hosted jQuery might be blocked If ...READ MORE

answered Jul 25, 2022 in Web Development by rajatha
• 7,680 points
1,416 views
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, 2022 in Others by narikkadan
• 63,600 points
2,528 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, 2022 in JQuery by Kichu
• 19,040 points
5,485 views
0 votes
1 answer
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP