web-dev-qa-db-ja.com

jQuery UIオートコンプリートの選択後にフォームフィールドをクリアする

フォームを開発し、jQuery UI Autocompleteを使用しています。ユーザーがオプションを選択するとき、親_<p>_タグに追加されたスパンにポップするよう選択します。次に、選択項目を入力するのではなく、フィールドをクリアするようにします。

スパンは正常に表示されていますが、フィールドをクリアすることはできません。

JQuery UI Autocompleteのデフォルトの選択アクションをキャンセルするにはどうすればよいですか？

ここに私のコードがあります：

_var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});
_

単に$(this).val("");を実行しても機能しません。気違いは、オートコンプリートを無視し、ユーザーがカンマを入力したときにアクションを実行するだけで、ほぼ正確な機能が正常に機能することです：

_$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});
_

実際の最終結果は、オートコンプリートを取得して複数の選択を処理することです。誰かがそのための提案があれば、彼らは歓迎されます。

jqueryjquery-uijquery-ui-autocomplete
90
Jon F Hancock

select関数の最後に$(this).val(''); return false;を追加して、フィールドをクリアし、イベントをキャンセルします:)

これにより、値が更新されなくなります。それがどのように動作するかを見ることができます ここで109行目付近 。

そこのコードは、特にfalseをチェックします。

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
173
Nick Craver

Falseを返す代わりに、event.preventDefault（）を使用することもできます。

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}
19
user1128713

フィールドを空にするには、selectコールバック内でfalseを返す必要があります。ただし、フィールドを再度制御する場合、つまり値を設定する場合は、UIから抜け出すために新しい関数を呼び出す必要があります。

おそらく、次のようなプロンプト値があります：

var promptText = "Enter a grocery item here."

要素の値として設定します。 （フォーカスに基づいて ''に設定します）。

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}
6
captahab

それは私のためにうまく機能します。

イベントを選択した後、イベントの変更を使用しました。

 change:function(event){
   $("#selector").val("");  
   return false;
 }

私は初心者です！

5
Silvana Saly Viana

これを試して

select: function (event, ui) {
    $(this).val('');
    return false;       
}
0
ImBS

私はそれを解決して、フォーカスを失うことを強制しました：

$('#select_id').blur();
printResult();
0
Mireia Gimeno