포커스가 없어지면 자동 완성 확인

Question

입력 필드의 값이 항상 소스의 값만을 가지도록하려면 어떻게해야합니까? 예를 들어

, 소스에서 I 데이터베이스 실제 스크립트로 구동된다

source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] 

이있는 경우는 다음과 같습니다

source: "get_json.aspx"; 

및 입력 필드에 I 입력 그냥 "차가운" , 어떻게 이런 일이 일어나지 않게 할 수 있습니까?

입력란에서 포커스를 잃어 버렸을 때 값이 소스에 존재하도록하려면 어떻게해야합니까?

Answer 1

적절한 이벤트에 바인딩해야합니다. 나는 close event에 바인딩해야한다고 생각합니다. value of input에 in array 요소가 있는지 확인하십시오. 그렇지 않으면 val을 사용하여 입력을 다시 비워야합니다. 로컬로 직접 테스트 해 보니 트릭입니다.

$("#tags").autocomplete({ 
    source: availableTags, 
    close: function(event, ui) { 
     var inputValue = $("#tags").val(); 
     var idx = jQuery.inArray(inputValue, availableTags); 
     if (idx == -1) { 
      $("#tags").val("");   
     } 
    } 
}); 

P.S

:는 좀 더 많은 테스트를했고, 나는 대신 다른 이벤트에 바인딩한다고 생각합니다. 탐색 바를 탭하면 작동하지 않습니다. 대신 blur 이벤트에 바인딩해야한다고 생각합니다.

[{"id":1,"value":"ActionScript"},{"id":2,"value":"AppleScript"},{"id":3,"value":"Asp"},{"id":4,"value":"BASIC"},{"id":5,"value":"C"},{"id":6,"value":"C++"},{"id":7,"value":"Clojure"},{"id":8,"value":"COBOL"},{"id":9,"value":"ColdFusion"},{"id":10,"value":"Erlang"},{"id":11,"value":"Fortran"},{"id":12,"value":"Groovy"},{"id":13,"value":"Haskell"},{"id":14,"value":"Java"},{"id":15,"value":"JavaScript"},{"id":16,"value":"Lisp"},{"id":17,"value":"Perl"},{"id":18,"value":"PHP"},{"id":19,"value":"Python"},{"id":20,"value":"Ruby"},{"id":21,"value":"Scala"},{"id":21,"value":"Scheme"}] 

---

$(function() { 
    var LIMIT = 10; 
    $.getJSON("json.json", function(data) { 
     var autocomplete = $("#tags").autocomplete({ 
      source: function(request, response) { 
       var i=0; 
       var result = []; 
       $.each(data, function(index, value) { 
        // value.value.search(/request.term/i); 
        var idx = value.value.toLowerCase().indexOf(request.term.toLowerCase()); 
        if (idx >= 0) { 
         result.push(value.value); 
         i++; 
        } 
        if (i === LIMIT) { 
         return false; 
        } 
       }); 
       response(result); 
      } 
     }); 

     $("#tags").blur(function() { 
      var inputValue = $("#tags").val(); 
      var clear = true; 
      $.each(data, function(index, value) { 
       if (value.value == inputValue) { 
        clear = false; 
        return false; 
       } 
      }); 
      if (clear) { 
       $("#tags").val(""); 
      } 
     }); 
    }); 
}); 

0,123,516 : 배열 =>

json.txt에

향상된 코드 =>

$("#tags").autocomplete({ 
    source: availableTags 
}); 

$("#tags").blur(function() { 
    var inputValue = $("#tags").val(); 
    var idx = jQuery.inArray(inputValue, availableTags); 
    if (idx == -1) { 
     $("#tags").val("");   
    } 
}); 

JSON