Question

我有一个自动填充文本框需要响应2个事件：

当用户在文本框中输入内容时（我当前正在使用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>

Answer 1

这正是jQueryUI为autocomplete引入特殊change事件的原因：

当字段模糊时触发，如果值已更改; 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”，那么查找最接近拼写的代码将用“孤儿院”替换该值，而如果某人实际选择了“孤儿院”，那么它将替换具有所选值的值。除了过度优化的愿望之外，这里很可能没有问题。

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

jQuery自动完成

2 个答案: