Clear text box after auto complete in jquery

Question

I implemented autocomplete using jQuery, when I select the data, it is saved in the result table, after choosing I need to clear the autocomplete text box that I can’t. I looked for the same thing and got this Clear text box in JQuery Autocomplete after selecting , but I did not know where to put it, or in firebug, I got an error when working (event, UI). Help Pls ... my code is as follows.

$(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ).click(function(o){ $(this).remove(); }); $( "#log" ).scrollTop( 0 ); } $( "#poolName" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "/DataWeb/getPoolName", type : 'post', dataType: 'json', data: { name_startsWith: request.term }, success: function( data ) { console.log(data); response( $.map( data, function( item ) { return { label: item.poolName, value: item.poolName } })); } }); }, minLength: 1, select: function( event, ui ) { log( ui.item ? ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); 

Answer 1

I tried with this document.getElementById ("point_name"). value = ""; and it works.

 function log( message ) { document.getElementById("poolName").value=""; $( "<div>" ).text( message ).prependTo( "#log" ).click(function(o){ $(this).remove(); }); $( "#log" ).scrollTop( 0 ); } 

Answer 2

 $( "#poolName" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "/DataWeb/getPoolName", type : 'post', dataType: 'json', data: { name_startsWith: request.term }, success: function( data ) { console.log(data); response( $.map( data, function( item ) { return { label: item.poolName, value: item.poolName } })); } }); }, select: function (e, i) { $('#poolName').val(''); return false; } ,minLength: 1, select: function( event, ui ) { log( ui.item ? ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); 

Answer 3

try using return false; inside select: clause,

 select: function( event, ui ) { log( ui.item ? ui.item.label : "Nothing selected, input was " + this.value); return false; }, 

Answer 4

The problem with the other answers is that she did not have a preventDefault call.

This will work:

 select: function (e, i) { e.preventDefault(); $('#poolName').val(''); return false; } 

Answer 5

I found that I needed to both clear the field and return false

 select: function(ev, ui) { console.log(this, ui.item) $(this).val('') return false },