jQuery UIオートコンプリート（隠しIDフィールド）

Question

現在、私はテキスト入力の直前に隠しフィールドを持つHTMLフォームを持っています。簡略化されたバージョンは次のとおりです。

<form> 
    <input type="hidden" name="key" id="key" /> 
    <input type="text" name="account" id="account" /> 
    <input type="button" value="Submit" /> 
</form> 

テキスト入力は、jQuery UIオートコンプリートで装飾されています。

$("#account").click(function() { 
    $(this).prev().val(''); 
    $(this).val(''); 
}).autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "AJAX.asmx/GetAccounts", 
      data: "{ 'Search': '" + request.term + "' }", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataFilter: function (data) { return data; }, 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         value: item.Value, 
         key: item.Key 
        } 
       })) 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus + ": " + errorThrown); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     $(this).prev().val(ui.item.key); 
    }, 
    change: function (event, ui) { 
     if ($(this).prev().val() == '') { 
      $(this).val(''); 
     } 
    } 
}); 

上記のスクリプトは、ユーザーが情報をコピーしてそれに貼り付ける場合を除いて、完全に機能します。ほとんどのユーザーはコピー＆ペーストし、AJAXアカウントの検索が完了する前に送信します。ユーザーは、ドロップダウンから結果を選択するためにスクリプトにスクリプトが必要であることを知らない場合、隠しフィールドにデータが入力されません。しかし、ほとんどのユーザーは気楽にしており、最小限のクリックで操作を行いたいと思っています。

1つの結果を持つペーストを傍受するにはどうすればよいですか？ユーザーが送信ボタンをクリックする前にこれを行うにはどうすればよいですか？

Answer 1

オートコンプリートメニューから選択を行う簡単な方法は、フォームのサブミットイベントをインターセプトし、#keyに何かがある場合を除いてfalseを返すことです。

//assuming there is only one form within web page 
$('form').submit(
    function(){ 
     if($('#key').val() == '') { 
      return false 
     } else { 
      return true 
     } 
    }); 

Answer 2

あなたはJorn Zaffererのプラグインを試してみることができます。ユーザーがリストから選択するように指示するmustMatchを指定できるオプションがあります。

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box. 

次にあなたがフィールドに値を持っていることを確認するバリデータを使用することができます。