Автозаполнение JQuery проверяет выбранное значение

Мы используем плагин автозаполнения jquery, написанный Jörn Zaefferer и пытаемся проверить допустимый вариант.

Плагин имеет событие result(), которое срабатывает при выполнении выбора. Это нормально, но мне нужно проверить значение в текстовом поле, когда пользователь щелкает. Поэтому мы попытались выполнить события .change() и .blur(), но оба они представляют проблему: когда вы нажимаете на запись в div результатов (список "предложить" ).change() и .blur() события, и это до того, как плагин написал значение в текстовое поле, поэтому на этом этапе нечего проверять.

Может ли кто-нибудь помочь мне настраивать события, поэтому всякий раз, когда кто-то отжимается, но не в окне результатов, я могу проверить допустимое значение в поле. Если это неправильный подход, пожалуйста, сообщите мне об этом. Мы первоначально пошли с этим плагином из-за его опции "mustMatch". Этот вариант, похоже, не работает во всех случаях. Много раз действительная запись будет записана в текстовое поле и очищена плагином как недействительная, я не смог определить почему.

Пример базового кода:

<html>
<head>
<title>Choose Favorite</title>
<script language="JavaScript" src="jquery-1.3.2.min.js" ></script>
<script language="JavaScript" src="jquery.autocomplete.min.js" ></script>
<script>
    $(".suggest").autocomplete("fetchNames.asp", {
        matchContains:false,
        minChars:1, 
        autoFill:false,
        mustMatch:false,
        cacheLength:20,
        max:20
    });

    $(".suggest").result(function(event, data, formatted) {
        var u = this;
        // Check value here

    });

    /* OR */

    $(".suggest").change(function(me) {
        //check value here
    });

</script>
</head>
<body>
    <label for="tbxName">Select name (I show 10):</label><br />
    <INPUT type="text" id="tbxName" name="tbxName" class="suggest"><br />
</body>
</html>

Ответ 1

Я думаю вместо того, чтобы писать собственную функцию, чтобы проверить соответствие данных, вы можете просто вызвать search(). Если result() вызывается с параметром null data, то вы знаете, что автозаполнение не использовалось и вызывая search() при размытии, вы гарантированно получите result() по крайней мере один раз.

Я разместил этот код для аналогичного вопроса, он также может помочь здесь.

autocompleteField.result(function(event, data, formatted) {
    if (data) {
        //auto-complete matched
        //NB: this might get called twice, but that okay
    }
    else {
        //must have been triggered by search() below
        //there was no match
    }
});

autocompleteField.blur(function(){
    autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn't used
});

Ответ 2

ОБНОВЛЕНИЕ: Это должно работать. Я загружаю список имен в массив, называемый ListOfNames, это используется в событии onBlur() для проверки имени, введенного против данных. Возможно, вам придется сделать некоторые настройки, но я думаю, что он должен делать то, что вы ищете.

var listOfNames = [];
$(document).ready(function(){
   $.get("fetchNames.asp", function(data){
     listOfNames = data.split("\r\n");    
   });
   $(".suggest").autocomplete("fetchNames.asp", {
        matchContains:false,
        minChars:1, 
        autoFill:false,
        mustMatch:false,
        cacheLength:20,
        max:20
    });
    $("#tbxName").blur(function(){
        if(!listOfNames.containsCaseInsensitive(this.value)){
          alert("Invalid name entered");
        }
    });        
});

Array.prototype.containsCaseInsensitive = function(obj) {
  var i = this.length;
  while (i--) {
    if (this[i].toUpperCase() === obj.toUpperCase()) {
      return true;
    }
  }
  return false;
}

Ответ 3

Это код, который я использовал в прошлом. Очень чистый и простой.

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#currentSelectedLevel" ).autocomplete({
  source: availableTags,
  change: function( event, ui ) {
        val = $(this).val();
        exists = $.inArray(val,availableTags);
        if (exists<0) {
          $(this).val("");
          return false;
        }
      }
});

Ответ 4

Я использую глобальную структуру данных для отслеживания найденных значений

var ac_sent = {};

обработчик события .result() вызывается перед обработчиком события .change(), поэтому в .result(событие, данные, форматирование). Я добавляю данные в структуру:

ac_sent[ data ] = true;

то в обработчике события .change(event) я проверяю, есть ли элемент в ac_sent [data], а если его нет, я знаю, что слово не было найдено:

$( "#textbox" ).change( function( event ) {

  var data = event.target.value;

  if ( !ac_sent[ data ] ) {
    // result was not found in autocomplete, do something...
    ac_sent[ data ] = true;  // remember that we processed it
  }

  return false;
});