JQuery clean autocomplete combobox value

Question

I used a jquery combobox for autocompletion and I needed to clean its value. I got into a solution which is like this: http://jsfiddle.net/BbWza/30/

The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).

 $('.ui-autocomplete-input').focus().val('');

Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.

The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.

Answer 1

You can add ids to the generated fields by adding this line as the last line of _create():

input.attr( 'id', $(select).attr( 'id' )+'-input' );

Now you can select individual fields with the ids:

$('#combobox-input').focus().val('');

Answer 2

To clear just only one combo you must select it with it's id:

    $('#combobox').focus().val('');
    $('#combobox').autocomplete('close');

with your code you are selecting all comboboxes because you are using a class selector.

EDIT if you want to make two buttons (one for each combobox) you could do:

$('.clicky').click(function() {
    var combo= $(this).prevAll('input:first');
    combo.focus().val('');
    combo.autocomplete('close');
    return false;
});

fiddle here: http://jsfiddle.net/BbWza/39/