I used a jquery bobox for autopletion and I needed to clean its value. I got into a solution which is like this: /

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

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

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

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

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

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

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

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

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

• javascript
• jquery
• jquery-ui
• autoplete
• bobox

6 Answers 6

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:

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

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

    $('#bobox').focus().val('');
    $('#bobox').autoplete('close');

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

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

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

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

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

I suspect in the real world that each bo 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="bo">
    ...
</select>
<a href="#" class="clearCombo">Clear</a>

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

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

Working demo at jsfiddle

If your link is not a sibling of your bo 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 mon parent of both the bo and the link. This only works if the mon parent contains only one bo and one link:

<span class="boContainer">
    <span>
        <select class="bo">
            ...
        </select>
    </span>
    <a href="#" class="clearCombo">Clear</a>
</span>

You use .closest(".boContainer") and .find(".ui-autoplete-input"):

$("select.bo").bobox();
$("a.clearCombo").click(function () {
    $(this).closest(".boContainer").find('.ui-autoplete-input')
        .focus()
        .val('')
        .autoplete('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 bobox. We can just infer it from the html. This makes it very easy to move bos 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 .autoplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.bo").bobox("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.

Well, in the example the following would only clear the last bobox:
$('.ui-autoplete-input').last().focus().val('');

This would clear the first one:
$('.ui-autoplete-input').first().focus().val('');

You can clear it in event "close" of the autoplete

$("#your-input").autoplete({
    source: items,            
    close: function (event, ui) {

        $(this).val("");

    }
});

How to give clear button for autobobox please tell me

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:

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