jQueryのUIオートコンプリートのために選択した後、クリアフォームフィールド

StackOverflow https://stackoverflow.com/questions/2561903

質問

私は、フォームを開発し、と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();
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top