JQuery Автозаполнение проверить выбранное значение - PullRequest
Новая
       21

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

22 голосов
/ 28 апреля 2009

Мы используем плагин 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>

Ответы [ 4 ]

9 голосов
/ 16 октября 2009

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

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

autocompleteField.result(function(event, data, formatted) {
    if (data) {
        //auto-complete matched
        //NB: this might get called twice, but that's 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
});
4 голосов
/ 28 апреля 2009

ОБНОВЛЕНИЕ: Это должно работать. Я загружаю список имен в массив с именем 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;
}
1 голос
/ 11 апреля 2016

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

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;
        }
      }
});
0 голосов
/ 29 января 2010

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

var ac_sent = {};

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

ac_sent[ data ] = true;

затем в обработчике события .change (событие) я проверяю, есть ли элемент в 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;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...