Question

I have an input field and a hidden div. The input is readonly. When the user clicks the input, a list of items is proposed using the JQuery UI autocomplete. What I would like and do not manage to achieve, is to trigger an event (removing the hidden class) when the user selects an item from the list. Hope someone can help. Thank you in advance for the replies. Cheers. Marc.

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 autocompleter which 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();
    }
})...