JQuery UI autocomplete - How to trigger an event when an item is selected?

Question

I have an input field and a hidden div. The entry is read only. When the user presses input, a list of items is suggested using the autocomplete JQuery UI. What I would like and failed to achieve is to trigger an event (deleting a hidden class) when the user selects an item from the list. Hope someone can help. Thank you in advance for your answers. Greetings. Mark.

http://jsfiddle.net/fdBHC/1/

My html:

<input id="conditions" type="text" readonly="readonly" /input> <div id="test" class="hidden">some text</div>​ 

My css:

 input{ margin:50px; border:1px solid black;} div{ width:200px height:200px; background-color:orange;} .hidden{ display:none;} 

My js:

 $(function() { var availableTags = [ "aucune","Prise de contact préalable nécessaire" ]; $("#conditions").autocomplete({ source: availableTags, minLength: 0 }).click(function() { $(this).val(""); $(this).autocomplete("search"); }); });​ 

Answer 1

There is an event in autocomplete that you can use (if I understand correctly):

 $("#conditions").autocomplete({ source: availableTags, minLength: 0, select: function(event, ui) { // do something when an item from the list is selected, for example: $('#test').remove(); } })... 

Answer 2

You really saved me after searching, testing, testing no more than 1 hour. Many thanks. I used it this way $("#farmer").autocomplete({ select: function(event, ui) { alert('youve just selected a farmer, thanks'); } })