JQueryクリーンオートコンプリートコンボボックスの値

Question

私はオートコンプリートにjqueryコンボボックスを使用しました。その値を消去する必要がありました。 私はこのような解決策を得ました：http://jsfiddle.net/BbWza/30/

問題は、以下のコードは、画面内のすべてのコンボのすべてのテキストボックスをクリアすることです。私は1つだけのコンボをクリアしたいと思います（たとえば、最初のコンボを考えてみましょう）。

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

一つだけ明確なリンクボタンがありますが、限り、一つだけがあるようにクリアされるコンボ問題ではありません。

解決策は、画面内でN個のコンボに対応する必要があります。例えば。各ボタンは対応するコンボを空にする必要があります。まあ

Answer 1

あなたは、この行を追加することによって生成されたフィールドにIDを追加することができます_create()の最後の行：

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

今、あなたはIDを持つ個々のフィールドを選択することができます。

これはコンボボックスをクリアしてくださいするよう

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

Answer 2

、例では次のようにのみ、最後のコンボボックスをクリアします：
$('.ui-autocomplete-input').last().focus().val('');

これは最初の1をクリアします：
$('.ui-autocomplete-input').first().focus().val('');

Answer 3

あなたが選択する必要がありますちょうど一つだけのコンボをクリアするにはそれはそれのid：

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

あなたのcとクラスセレクタを使用しているため、すべてのコンボボックスが選択されています。

EDITあなたはあなたができる二つのボタン（各コンボボックスに1つ）を作成したい場合：ここ

$('.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 jsfiddleは少しあいまいです - そこに2つのコンボボックス一つだけ明確なリンクがあるので、リンクはただ一方または両方のコンボボックスをクリアすることになっているかどうかは明らかではありません。

実際のところ、各コンボボックスには明確なリンクがあると思われます。あなたの明確なリンクのための右のテキストボックスを選択することはすべてあなたのhtmlに依存します。明確なリンクがあなたの<select>要素の次の兄弟であるところの一つの簡単なケースは、次のようになります。

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

次にあなたがクラスを使用して、1回のコールでコンボを作成することができます。次に、クリアクリックハンドラを一度に作成します。ハンドラは、.prevAll(".ui-autocomplete-input")を使用して関連するテキストボックスを検索します。

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

Working demo at 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; 
}); 

Working demo at jsfiddle

いいところがリンクということである共通の親が一つだけのコンボと一つのリンクが含まれている場合にのみ動作します関連するコンボボックスのIDを知る必要はありません。私たちはhtmlから推論することができます。これにより、コンボを移動したり、新しいコンボを追加したりすることが非常に簡単になります。

つの提案：

1. あなたのプラグインに明確なメソッドを追加します。あなたのウィジェットのユーザーは、内部の仕組みを知っている必要はありません。あなたの例では、ウィジェットが.autocomplete()を使用していることを知る必要があります。これにより、後で実装を変更することもできなくなります。 「クリア」メソッドを追加すると、クリックハンドラーが$(this).prevAll("select.combo").combobox("clear")に簡単になります。
2. ウィジェットにクリアボタンを作成するオプションを与えます。ユーザーはいつでもその機能を無効にして、必要に応じて独自のクリアボタンを追加することができます。 autocomboboxのためのクリアボタンを与えるためにどのよう

Answer 5

あなたは_create()の最後の行に次の行を追加することで生成されたフィールドにIDを追加することができます私に

を教えてください：

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

を今、あなたは選択することができますidsを持つ個々のフィールド：

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

Answer 6

オートコンプリートの「閉じる」イベントでクリアすることができます

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

     $(this).val(""); 

    } 
});