[解決済み] jQuery UI オートコンプリートの選択後フォームフィールドをクリアする

質問

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

スパンはうまく表示されるのですが、フィールドをクリアすることができません。

jQuery UI Autocompleteのデフォルトのselectアクションをキャンセルする方法を教えてください。

以下は私のコードです。

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 );
}