100

フォームを開発していて、jQueryUIオートコンプリートを使用しています。<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>");
    }
});

実際の最終結果は、オートコンプリートを取得して複数の選択で機能するようにすることです。誰かがそれについて何か提案があれば、彼らは歓迎されるでしょう。

4

6 に答える 6

185

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

これにより、値が更新されなくなります。ここで109行目でどのように機能するかを確認できます。

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

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
于 2010-04-01T16:24:24.930 に答える
22

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();
}
于 2012-05-29T15:21:31.107 に答える
6

フィールドを空にするには、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
}
于 2011-05-26T18:28:06.123 に答える
5

それは私にとってうまくいきます。

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

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

私は初心者です！

于 2013-10-27T13:26:22.497 に答える
0

これを試して

select: function (event, ui) {
    $(this).val('');
    return false;       
}
于 2017-01-09T10:03:31.473 に答える
0

私はちょうどそれを解決し、焦点を失うことを余儀なくされました：

$('#select_id').blur();
printResult();
于 2019-01-24T13:51:28.797 に答える