jQueryのUIオートコンプリートのために選択した後、クリアフォームフィールド
-
23-09-2019 - |
質問
私は、フォームを開発し、とjQuery UIオートコンプリートを使用しています。ユーザがオプションを選択すると、私は選択が親<p>
タグに追加スパンにポップアップ表示します。それから私は、フィールドをクリアするのではなく選択が移入されたいです。
私はスパンがうまく表示されてありますが、私は、フィールドをクリアするために取得することはできません。
あなたはjQueryのUIオートコンプリートのデフォルトの選択アクションをキャンセルする方法は?
ここに私のコードは次のとおりです。
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>");
}
});
実際の最終結果は複数選択で動作するようにオートコンプリートを取得することです。誰もがそのための任意の提案を持っている場合、彼らは歓迎されるであろう。
解決
追加$(this).val(''); return false;
)
select
関数の最後のフィールドをクリアして、イベントをキャンセルするに
これは、更新されてから値を防ぐことができます。あなたはそれがここに線109の周りにをどのように動作するかを見ることができます。
具体的に偽のために存在チェックのコード
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
他のヒント
あなたも(event.preventDefaultを使用することができます)。
select: function(event, ui){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
event.preventDefault();
}
の戻り偽のは、フィールドを空にするために、選択したコールバック内で必要とされます。 あなたがもう一度、すなわち、フィールドを制御する値を設定したい場合は、あなたは、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
}
それは私のためにうまく機能します。
selectイベントの後、私は、イベントの変更を使用します。
change:function(event){
$("#selector").val("");
return false;
}
私は初心者ですよ!
このお試しください
select: function (event, ui) {
$(this).val('');
return false;
}
私はちょうど失う焦点に強制的にそれを解決します:
$('#select_id').blur();
printResult();