탭이 자동으로 입력 범위를 벗어난 경우 자동 완성 기능이 실행되지 않습니다.

Question

지연 옵션을 0으로 설정하고 autoFocus를 true로 설정하여 입력에 자동 완성을 구성했습니다. autocomplete의 소스 : AJAX 호출로 설정됩니다. 일반적으로 사용자가 필드에서 검색 문자열과 탭을 입력하면 첫 번째 항목이 선택됩니다.

그러나 숙련 된 사용자가 일치 항목이 하나만있는 검색 문자열을 입력하고 이 매우 빠르면 탭이 입력에서 제외되어 select 옵션에 지정된 함수가 실행되지 않고 입력에 단순히 검색 만 포함됩니다 사용자가 입력 한 문자열. 유효한 선택이 이루어지지 않았기 때문에 양식 제출시 오류가 발생합니다 (일반적으로 일치 항목을 선택하면 숨겨진 양식 필드가 선택된 일치 항목의 값으로 설정됩니다).

일치를 검색하기 위해 소스 옵션으로 지정된 함수에 중단 점을 넣으면 호출 된 것을 볼 수 있으며 일치하는 목록을 다시 얻을 수 있습니다. 그러나 내가 단축키를 지정하면 옵션으로 지정된 함수에 넣는 중단 점에 절대로 도달하지 않습니다.

localhost 또는 원격 웹 서버에 대해 실행할 때 Chrome과 IE 11에서이 동작을 재현 할 수 있습니다. jquery-ui 버전은 v1.11.4입니다.

질문 : 자동 완성을 항상 구성 할 수 있습니까? 사용자가 검색 문자열을 입력하고 탭을 입력 한 경우 첫 번째로 반환되는 일치 항목을 선택하는 것이 얼마나 빠르지 않습니까?

Answer 1

포커스가 관련 입력에서 설정되면 자동 완성 기능이 사용 중지되므로 해당 입력에서 포커스를 이동하면 자동 완성 값에 액세스 할 수 없습니다. 메뉴가 트리거 (및 열) 경우

이 솔루션은 만 작동합니다 :

var availableTags = [ 
 
    "ActionScript", 
 
    "AppleScript", 
 
    "Asp", 
 
    "BASIC", 
 
    "C", 
 
    "C++", 
 
    "Clojure", 
 
    "COBOL", 
 
    "ColdFusion", 
 
    "Erlang", 
 
    "Fortran", 
 
    "Groovy", 
 
    "Haskell", 
 
    "Java", 
 
    "JavaScript", 
 
    "Lisp", 
 
    "Perl", 
 
    "PHP", 
 
    "Python", 
 
    "Ruby", 
 
    "Scala", 
 
    "Scheme" 
 
]; 
 
$("#tags").autocomplete({ 
 
    source: availableTags, 
 
    autoFocus: true, 
 
    delay: 0, 
 
    focus: function(event, ui) { 
 
    $(this).val(ui.item.value) 
 
    } 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="ui-widget"> 
 
    <label for="tags">Tags: </label> 
 
    <input id="tags"> 
 
</div>

그러나 경우에, 그래서 지연이 없을 것 0으로 설정이 지연 source은 아약스 호출입니다. 지연이 있습니다 (사용자가 포커스를 다른 요소로 이동하면 결과가 원하는 대상이되지 않습니다).

내가 알고있는 것이 정확히 무엇인지는 모르겠지만 사전 정의 된 값으로 작업하면 해결책을 얻을 수 있습니다.