jQuery UI Autocomplete with Hidden 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 Autocomplete.

$("#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

Простой способ принудительного выбора из меню автозаполнения состоит в том, чтобы перехватить событие отправки формы и вернуть false, если в #key ничего нет.

//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. 

Тогда вы могли бы использовать валидатор, чтобы убедиться, что поле имеет значение.