フォーカスが失われたときのオートコンプリートチェック

Question

入力フィールドの値に常にソースからの値が含まれていることを確認するにはどうすればよいですか？例えば

、ソースに私は実際のスクリプトとして駆動されるデータベースである

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

を持っている場合は、次のとおり

source: "get_json.aspx"; 

と入力フィールドに私は「コールド」と入力しますこれをどうやって止めるのですか？

入力フィールドからフォーカスが失われたときに、値がソースに確実に存在するようにするにはどうすればよいですか？

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イベントにバインドする必要があります。

改良されたコード配列=>

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：

[{"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(""); 
      } 
     }); 
    }); 
});