Значение JQuery clean autocomplete combobox

Question

Я использовал комбобокс jquery для автозаполнения, и мне нужно было очистить его значение. Я попал в решение, которое выглядит так: http://jsfiddle.net/BbWza/30/

Проблема в том, что приведенный ниже код очищает все текстовые поля всех комбинаций на экране. Я бы хотел очистить только ОДИН комбо (скажем, первый).

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

Хотя есть только одна кнопка очистки ссылки, не имеет значения, какая комбинация будет очищена, пока только одна.

Решение должно работать для N комбо на экране. Например. Каждая кнопка должна очистить свой соответствующий комбо.

Answer 1

Вы можете добавить идентификаторы в сгенерированные поля, добавив эту строку в качестве последней строки _create():

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

Теперь вы можете выбрать отдельные поля с идентификаторами:

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

Answer 2

Ваше jsfiddle немного двусмысленно относительно того, какое поле со списком должно быть очищено - есть два поля со списком, но только одна чистая ссылка, поэтому не очевидно, если ссылка должна очистить только один или оба поля со списком.

Я подозреваю, что в реальном мире каждое поле со списком имеет свою собственную четкую ссылку. Выбор правильного текстового поля для вашей чистой ссылки все зависит от вашего HTML. В одном простом случае ясной ссылкой будет следующий элемент вашего элемента <select>:

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

Тогда вы можете создать комбо за один вызов, используя класс. Затем создайте все обработчики кликов сразу. Обработчик будет использовать .prevAll(".ui-autocomplete-input") для поиска соответствующего текстового поля.

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

Рабочая демонстрация в jsfiddle

Если ваша ссылка не является родственником вашего поля со списком, это нормально. Либо найдите родителя, который является родным братом, и используйте вышеуказанный подход. Или, если это не сработает, найдите общего родителя для комбинации и ссылки. Это работает, только если общий родитель содержит только одну комбинацию и одну ссылку:

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

Вы используете .closest(".comboContainer") и .find(".ui-autocomplete-input"):

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

Рабочая демонстрация в jsfiddle

Хорошая вещь об этих методах заключается в том, что ссылка не должна знать идентификатор своего связанного списка. Мы можем просто сделать вывод из HTML. Это позволяет очень легко перемещать комбо и добавлять новые.

Два предложения:

1. Добавьте понятный метод к вашему плагину. Пользователи вашего виджета не должны знать его внутреннюю работу. В вашем примере вы должны знать, что виджет использует .autocomplete(). Это также препятствует тому, чтобы вы изменили свою реализацию позже. Добавление «чистого» метода упростит ваш обработчик кликов до $(this).prevAll("select.combo").combobox("clear").
2. Дайте вашему виджету возможность создать саму кнопку очистки. Пользователи всегда могут отключить его и добавить собственную кнопку очистки, если они хотят.

Answer 3

Чтобы очистить только один комбо, вы должны выбрать его с его идентификатором:

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

, используя свой код, вы выбираете все списки, потому что вы используете селектор класса.

ПРАВКА, еслиВы хотите сделать две кнопки (по одной для каждого выпадающего списка), которые вы можете сделать:

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

здесь: http://jsfiddle.net/BbWza/39/

Answer 4

Вы можете очистить его в случае «закрытия» автозаполнения

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

        $(this).val("");

    }
});

Answer 5

Как дать кнопку очистки для автокомбокса, скажите, пожалуйста

Вы можете добавить идентификаторы в сгенерированные поля, добавив эту строку в качестве последней строки _create():

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

СейчасВы можете выбрать отдельные поля с идентификаторами:

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

Answer 6

Ну, в следующем примере будет очищен только последний комбинированный список: $('.ui-autocomplete-input').last().focus().val('');

Это очистит первый: $('.ui-autocomplete-input').first().focus().val('');