자동 완성 강제 선택

Question

JQuery 자동 완성을 사용하고 있습니다. 문제는 텍스트 상자에 쓸모없는 것을 입력하고 제출 버튼을 클릭 할 때입니다. 폼이 제출 된 후에 change 메소드가 호출되기 때문에 처리 전에 유효성 검사를하지 않습니다.

var fromAutocomplete = this.$("#fromCity").autocomplete({ 
         source : urlRepository.airportAutoSuggest, 
         minLength : 3, 
         select: function(event, ui) { 
          searchFormView.$("#fromCity").val(ui.item.label); 
          searchFormView.$("#fromCityCode").val(ui.item.value); 
          searchFormView.$('#fromCityCountry').val(ui.item.country); 
          isValid = true; 
          return false; 
         }, 
         selectFirst: true, 
         change: function (event, ui) { 
          if (!ui.item) { 
           $(this).val(''); 
          } 
         } 
        }).live('keydown', function (e) { 
         var keyCode = e.keyCode || e.which; 
         //if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion 
         if((keyCode === 9 || keyCode === 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() === 0)) { 
          $(this).val($(".ui-autocomplete li:visible:first").text()); 
         } 
        }); 

탭을 누르면 정상적으로 작동합니다.
자동 완료 결과의 값이 선택되지 않은 경우 누구든지 양식 제출을 제한하는 방법을 알려 줄 수 있습니까?

Answer 1

양식을 제출하는 기본 브라우저 동작이기 때문에 키가 작동하지 않습니다. 양식을 가져 오려면 Enter 키를 누른 채로 입력해야합니다.

var fromAutocomplete = this.$("#fromCity").autocomplete({ 
    source : urlRepository.airportAutoSuggest, 
    minLength : 3, 
    select: function(event, ui) { 
     searchFormView.$("#fromCity").val(ui.item.label); 
     searchFormView.$("#fromCityCode").val(ui.item.value); 
     searchFormView.$('#fromCityCountry').val(ui.item.country); 
     isValid = true; 
     return false; 
    }, 
    selectFirst: true, 
    change: function (event, ui) { 
     if (!ui.item) { 
      $(this).val(''); 
     } 
    } 
}).live('keydown', function (e) { 
    var keyCode = e.keyCode || e.which; 
    //if TAB is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion 
    if(keyCode === 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() === 0)) { 
     $(this).val($(".ui-autocomplete li:visible:first").text()); 
    } 
}).closest('form').submit(function() { 
    //if RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion 
    $(this).val($(".ui-autocomplete li:visible:first").text()); 

    return false; 
});