2011-09-16 30 views
5

jquery UIの「反対」を作成する方法を理解しようとしています。誰かがオプションを選択せず​​に "jquery something"と入力すると、出力は "new input:jquery something"となります。しかし、 "jquery"が選択されているときは、何らかの形で "list:jquery"から選択してkeypressの伝播を防ぐだけでいいです。しかし、両方のイベントが発生します。私はそれを一つまたは他のものにしようとしています。jquery ui autocomplete:アイテムが選択されていない場合にのみトリガー

<input class="test" type="text" /> 

<script> 
$('.test').autocomplete({ 
    select: function (event, ui) { 
     alert('selected from list: ' + ui.item.label); 
     event.preventDefault(); 
     return false; 
    }, 
    source: ["jquery", "jquery ui", "sizzle"] 
}); 
$('.test').live('keypress', function (e) { 
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
     alert('new input: ' + $(this).val()); 
    } 
}); 
</script> 

これは、「入力」キーがuiのメニューからオプションを選択するために使用されることを前提としています。

+0

、それは私のようにキーを示しタイプを選択しますが、値を選択した場合は、矢印キーを使用してもキープレスイベントは表示されません。問題を明確にするか、少なくともこれがどのような究極の使用法なのかを教えてください。そうすれば、どのようにして支援するのかをよりよく理解することができます。 –

+0

私は警告するためにそれを変更します。 Console.logはFirebug用です。また、 "enter"キーで入力してください。 – Parmenides

答えて

8

autocompletechangeイベントを使用してこれを実行できます。 、ユーザーがオプションを選択したか、その中で何かを入力したかどうかを判断することができ、リストにはなかった、このイベントを使用する:

$("#auto").autocomplete({ 
    source: ['hi', 'bye', 'foo', 'bar'], 
    change: function(event, ui) { 
     console.log(this.value); 
     if (ui.item == null) { 
      $("span").text("new item: " + this.value); 
     } else { 
      $("span").text("selected item: " + ui.item.value); 
     } 
    } 
}); 

例:私はこれを実行するとhttp://jsfiddle.net/Ne9FH/

+1

keypress enterと動的データソースを使用して変更イベントをトリガーすることができれば、うまくいくはずです。しかし、ここで最善の答えは、私はデータソースについては何も言及していない。 – Parmenides

関連する問題