JQuery автозаполнения

У меня есть текстовое поле автозаполнения, который должен ответить на 2 события:JQuery автозаполнения

Когда пользователь сделал набрав что-то в текстовое поле (я в настоящее время с помощью focusout предположить, когда пользователь сделал например, если пользователь выберет текстовое поле, это означает, что пользователь выполнил ввод.)
Когда пользователь выбирает элемент в списке автозаполнения значений (я использую событие select автозаполнения, чтобы определить это)

Проблема:

Когда пользователь выбирает элемент в списке автозаполнения значений, цепь события такова, что focusout называют первым, а затем в select. Когда в focusout у меня есть доступ к тому, что пользователь набрал, а не то, что пользователь выбрал из списка автозаполнения значений, и это то, что мне действительно нужно. Как решить эту проблему?

Шаги по воспроизведению проблемы:

В текстовом поле введите букву a
Выберите ActionScript из списка автозаполнения значений

Наблюдайте сообщения console.debug:

focusout event called 
a 
select event called 
ActionScript

Вот код:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <title>Data Matching</title> 
    </head> 
    <body> 
     <form> 
      <input id="1" type="text"></input> 
      <input id="2" type="submit"></input> 
     </form> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

     <script> 
     $('#1').autocomplete(
     { 
      select: function (event, ui) 
      { 
       "use strict"; 
       console.debug('select event called'); 
       console.debug(ui.item.value); 
      }, 
      source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"], 

      minLength: 1 
     }); 

     $('#1').focusout(function() 
     { 
      "use strict"; 
      console.debug('focusout event called'); 
      console.debug($(this).attr('value')); // At this point, I need the value that was selected from autocomplete. I only get the value that the user typed, though 
     }); 
     </script> 
    </body> 
</html>

источник

2011-09-11 StackOverflowNewbie

Именно поэтому jQueryUI введен специальный change событие для autocomplete:

Вызывается, когда поле размыто, если значение изменилось; ui.item относится к выбранному элементу.

Это событие может сделать двойную обязанность для обоих ваших требований:

$("#1").autocomplete({ 
    /* snip */ 
    change: function(event, ui) { 
     if (ui.item) { 
      console.log("ui.item.value: " + ui.item.value); 
     } else { 
      console.log("ui.item.value is null"); 
     } 
     console.log("this.value: " + this.value); 
    } 
});

ui.item не будет определен, когда пользователь не выбрать значение из списка кандидатов автозаполнения.
С другой стороны, this.value будет всегда быть верным.

Вот пример этого: http://jsfiddle.net/33GJb/

источник

2011-09-12 01:29:00

Это сработало. Я избавился от обработчика события «focusout». Благодарю. – StackOverflowNewbie

Удивительный, рад помочь. –

Также, пожалуйста, не забудьте принять ответ, если он помог ':)' –

Во-первых, только для образовательных целей, это важно для тех, кто понимают, что эти события perticular будет всегда огонь в этом порядке. В этом случае я считаю, что есть несколько разных способов решения проблемы, и вот что я придумал;

1: Создайте приложение, чтобы несколько значений, выбранных пользователем (тип или выбранный), не мешали. Например, если приложение выполняет автоматическое исправление орфографии, а кто-то набрал «orphanag» при фокусировке, код, который искал ближайшую орфографию, заменил бы значение «приютом для сиротства», чем если бы кто-то действительно выбрал «детские дома», он заменил бы значение с выбранным значением. Там, скорее всего, здесь не проблема, кроме стремления к оптимизации.

Два: имеют знаковое значение в Javascript или в Html Element ("data-corrected = false"), который существует. На FocusOut установите SetTimeout для ожидания продолжительности времени. Затем, если пользователи выбрали значение, установите значение флага равным true. Когда продолжительность увеличивается, проверьте отмеченное значение, если оно истинно, ничего не делайте, иначе используйте значение в поле ввода для чего-то.

источник

2011-09-11 23:30:07

Эрик, я обдумывал решения, такие как те, которые вы предлагаете. Я надеюсь, что мне не придется идти по этому маршруту, поскольку мне кажется, что это немного хакирует (но, возможно, это не так, может быть, это все так, и я должен с этим справиться). Любые другие идеи? – StackOverflowNewbie

Не совсем, если вам это не нравится, то два - это метод сигнализации, это похоже на то, как работает потоки. –

Да ... # 2, вероятно, лучше подходит для моей проблемы. – StackOverflowNewbie

JQuery автозаполнения

ответ

Смежные вопросы