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.

Solution 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('');

Solution 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/

Solution 3

Your jsfiddle is a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.

I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select> element:

<select class="combo">
    ...
</select>
<a href="#" class="clearCombo">Clear</a>

Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input") to find its associated textbox.

$("select.combo").combobox();
$("a.clearCombo").click(function () {
    $(this).prevAll('.ui-autocomplete-input').first()
        .focus()
        .val('')
        .autocomplete('close');
    return false;
});

Working demo at jsfiddle

If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:

<span class="comboContainer">
    <span>
        <select class="combo">
            ...
        </select>
    </span>
    <a href="#" class="clearCombo">Clear</a>
</span>

You use .closest(".comboContainer") and .find(".ui-autocomplete-input"):

$("select.combo").combobox();
$("a.clearCombo").click(function () {
    $(this).closest(".comboContainer").find('.ui-autocomplete-input')
        .focus()
        .val('')
        .autocomplete('close');
    return false;
});

Working demo at jsfiddle

The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.

Two suggestions:

1. Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses .autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.combo").combobox("clear").
2. Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.

Comments

[pimvdb]

I don't really believe in the last example. An ID should return one element anyway.

[JJJ]

$( '#combobox' ) won't work, it selects the select field from which the combobox is created, not the combobox itself.

[dkroy]

+1 nicely done, when I realized you couldn't select it via id I was going to try something similar. Great Example!

[Nicola Peluchetti]

you are right, i edited the answer with a more general solution for now

[ClayKaboom]

I think this is the most generic solution. This way I don't depend on links and I can make any other component clear my comboBox. THank yoU!