숨겨진 ID 필드로 jQuery UI 자동 완성

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 계정 검색이 완료되기 전에 제출하십시오. 사용자는 드롭 다운에서 결과를 선택하기 위해 스크립트에 스크립트가 필요하다는 것을 모릅니다. 그렇지 않으면 숨겨진 필드가 채워지지 않습니다. 그러나 대부분의 사용자는 참을성이 없어 최소한의 클릭만으로 원하는 작업을 수행하려고합니다.

하나의 결과가있는 붙여 넣기를 어떻게 가로 챌 수 있습니까? 사용자가 제출 버튼을 클릭하기 전에 어떻게해야합니까?

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을 지정할 수있는 옵션이 있습니다.

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. 

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

그런 다음 당신은 필드에 값이 있는지 확인하는 유효성 검사기를 사용할 수 있습니다.