JQuery автозаполнение - PullRequest
Новая
       25

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

10 голосов
/ 12 сентября 2011

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

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

Проблема:

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

Действия по воспроизведению проблемы:

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

  3. Наблюдайте сообщения 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>

Ответы [ 2 ]

8 голосов
/ 12 сентября 2011

Именно поэтому 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/

0 голосов
/ 12 сентября 2011

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...