JQuery nettoyer la saisie semi-automatique zone de liste déroulante valeur

Vous pouvez ajouter des id aux champs générés par l'ajout de cette ligne, comme la dernière ligne de _create():

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

Maintenant, vous pouvez sélectionner les champs avec les id:

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

OriginalL'auteur JJJ

Votre jsfiddle est un peu ambiguë qui de zone de liste déroulante doit être effacé - il y a deux zones de liste déroulante, mais seulement un lien clair, de sorte qu'il n'est pas évident si le lien est censé effacer juste une ou deux zones de liste déroulante.

Je soupçonne que dans le monde réel que chaque zone de liste modifiable est de lien clair. La sélection de la zone de texte à droite de votre lien clair tout dépend de votre code html. Un simple serait le cas où le lien est le suivant frère de votre <select> élément:

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

Vous pouvez créer des combos dans un appel à l'aide de classe. Puis créer le clair sur les gestionnaires de tous à la fois. Le gestionnaire d'utilisation .prevAll(".ui-autocomplete-input") de trouver son associée zone de texte.

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

Travail de démonstration à jsfiddle

Si votre lien n'est pas un frère ou une sœur de votre zone de liste modifiable, c'est ok. Soit trouver son parent qui est un frère ou une sœur et d'utiliser l'approche décrite ci-dessus. Ou, si cela ne fonctionne pas, trouver la mère commune à la fois le combo et le lien. Cela ne fonctionne que si le parent commun ne contient qu'un seul combo et un lien:

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

Vous utilisez .closest(".comboContainer") et .find(".ui-autocomplete-input"):

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

Travail de démonstration à jsfiddle

La bonne chose à propos de ces techniques est que le lien n'a pas besoin de connaître le numéro d'identification de la zone de liste déroulante. On peut juste en déduire à partir de l'html. Cela rend très facile à déplacer grâce à des combos autour et en ajouter de nouvelles.

Deux suggestions:

1. Ajouter une méthode claire pour votre plugin. Votre widget utilisateurs ne devraient pas avoir à connaître son fonctionnement interne. Dans votre exemple, vous devez savoir que ce widget utilise .autocomplete(). Cela vous empêche également de modifier votre mise en œuvre plus tard. L'ajout d'un "clair" méthode permettrait de simplifier votre gestionnaire de clic à juste $(this).prevAll("select.combo").combobox("clear").
2. Donner votre widget la possibilité de créer le bouton effacer lui-même. Les utilisateurs peuvent toujours le désactiver et ajouter leur propre touche effacer si vous le souhaitez.

OriginalL'auteur gilly3

Vous pouvez le désactiver en cas de "fermeture" de la saisie semi-automatique

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

        $(this).val("");

    }
});

OriginalL'auteur João Pedro Hudinik