2012-02-27 10 views
0

Jquery autosuggestをテキストボックスに使用するフィールド「accountname」があります。ユーザが自動服薬値から選択し、"Enter Key"を押して、選択した値を入力します。 現在、私は「Jqueryホットキー」プラグインを使用してフォームを送信するために「Enterキー」をマッピングしました。jquery autosuggest enterkey issue

問題は、ユーザーがautosuggestから値を選択するとすぐに、「Enter」を押して選択するかどうかです。フォームが提出されています。私はユーザーがautosuggestドロップダウンでenterkeyを押すと、フォームを送信したくない。しかし、自動対応のフィールドに焦点が当てられている場合は、フォームを提出する必要があります。

どの関数をオーバーライドする必要がありますか?

$(document).ready(function() { 
     var availableTags = [ 
      // abbreviations     
      {"label":"academy - acad","value":"acad"},{"label":"accident - acc","value":"acc"},{"label":"account - acct","value":"acct"}]; 

    function split(val) { 
     return val.split(/\s\s*/); 
    } 

    function extractLast(term) { 
     return split(term).pop();   
    } 

    $("#accountName").bind("keydown", function(event) { 
     if (event.keyCode === $.ui.keyCode.TAB && 
       $(this).data("autocomplete").menu.active) { 
      event.preventDefault(); 
     } 

    }).autocomplete({ 
     minLength: 2, 
     autoFocus: false, 

     source: function(request, response) {    
      // delegate back to autocomplete, but extract the last term 
      response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term))); 
     }, 
     focus: function() {    
      // prevent value inserted on focus 
      return false; 
      //return false; 
     }, 
     select: function(event, ui) {    
      var terms = split(this.value); 
      // remove the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.item.value); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(" "); 

      // added to trim space 
      $("#accountName").val($.trim($("#accountName").val())); 

      return false; 
     } 
    }); 
}); 
+0

参考になるコードサンプルを投稿してください。 – DG3

+0

コードを表示できますか? selectイベントは、デフォルトではテキストフィールドに値を設定する必要があります。したがって、独自のselectイベントを指定しない限り、それは何をすべきかです。 – itsmequinn

答えて

3

autocompleteselectイベントのイベントpropoagationを停止します。

は、ここに私のスニペットです。

$(".selector").autocomplete({ 
    select: function(event, ui) { 
     event.stopPropagation(); 
    } 
}); 
0

キープレス上のテキスト入力フィールドのデフォルトの動作では、フォームを送信することです。

のjQuery UIオートコンプリートは、のKeyDownイベントに結合することによって動作し、それは、メニューのオープンは、もしそうならばevent.preventDefault()キープレスを呼び出しながら押下するかどうかをチェックします。その後のENTERはpreventDefault(メニューが再び開いていない限り)になりません。

だから、これのすべては自然にうまく動作します。

あなたのコードを見ずにはるかに言うことはできませんが、私は言うでしょう:jQuery UIは、Enterキーを処理させ、必要に応じてform.submitにバインドします。