jQuery自动完成

Question

我有一个自动完成文本框，需要响应2个事件：

• 当用户在文本框中输入完内容时（我目前正在使用focusout来假设用户输入focusout 。因此，如果用户在文本框中跳出标签，则意味着用户已经输入完。）
• 当用户在自动完成值列表中选择一个项目时（我正在使用自动完成的select事件来确定）

问题：

当用户在值的自动完成列表中选择一个项目时，事件链是这样的： focusout调用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>

Answer 1

这就是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/

Answer 2

首先，仅出于教育目的，重要的是任何人都应了解，这些异常事件将始终按此顺序触发。 既然如此，我相信您可以通过几种不同的方法来解决问题，这就是我的想法。

一：构建应用程序，以使用户选择的多个值（类型或所选）不会受到干扰。 例如，如果应用程序正在自动更正拼写，并且在焦点输出上键入“ orphanag”，则查找最接近的拼写的代码将用“ orphanage”替换该值，而如果有人实际选择了“ orphanages”，则它将替换值与所选值。 除了对过度优化的渴望之外，这里最有可能不是问题。

二：在Javascript或存在的Html元素（“ data-corrected = false”）中具有标记的值。 在FocusOut上，将SetTimeout设置为等待一段时间。 然后，如果用户选择了一个值，则将标记的值设置为true。 持续时间到时，请检查标记的值，如果为true，则不执行任何操作，否则请使用输入字段中的值进行操作。