Make jquery autocomplete not to fill the input value with the label of selected item

Question

Is there any way to make jquery autocomplete plugin only respond to the "select" callback, not to fill the target input with the label value of the selected item after user selection?

I am trying but still no success, waiting for help...

Regards. Larry

Answer 1

I know that this is an old question but, for people that doesn't want to use the setTimeout function, the solution is to change the property ui.item.value to ""

Code :

$('#ac').autocomplete({
    source : ["hello", "how", "do", "you", "do"],
    select: function(event, ui){
        if (ui.item && ui.item.value){
            ui.item.value="";
        } 
    }
})

Answer 2

Try code below ;)

$('#ac').autocomplete({
    source : ["hello", "how", "do", "you", "do"],
    close: function(event, ui){
          $('#ac').val('');
    }
});

Answer 3

If your source array is an array of objects with "label" and "value" properties, the plugin handles this for you.

See jQuery api for autocomplete :

 $('#autocomplete').autocomplete({ source: [ { label: 'This is a descriptive label' , value: 'Just the value' } ,{ label: '2 is better than one' , value: '2'} ,{ label: 'third times the charm' , value:'Three' } ] }) 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <input type='text' id='autocomplete'> 

SO's code snippet doesn't like it but it works

Answer 4

Here is an even simpler way (using experimentX's code):

$('#ac').autocomplete({
    source : ["hello", "how", "do", "you", "do"],
    select: function(event, ui){
        $('#ac').css('color','white');    
    }
})

Answer 5

DEMO ON JS FIDDLE

$('#ac').autocomplete({
    source : ["hello", "how", "do", "you", "do"],
    select: function(event, ui){
        setTimeout(function (){
          $('#ac').val('');    
        }, 1000)
    }
})