更新

Question

我使用JQuery UI创建了一个简单的自动完成控件。我有一个输入字段的默认值，显示“输入您的关键字...”。我设置了一个 focus（）事件，当用户将焦点设置为输入字段进行输入时，该事件将清除输入。

在IE中，当您键入并且菜单显示项目列表时，从菜单项中选择项目时，将再次调用 focus（）。对 focus（）的额外调用仅发生在IE中。副作用是从文本字段中清除所选菜单项。

通过使用autocomplete.focus()事件，我有一个非常原始的解决方案。当用户将鼠标悬停在选定的菜单项上时会触发此事件。在这里，我可以设置一个全局布尔变量，该变量可用于告诉输入字段上的focus（）事件，菜单项是活动/可见的，因此不清除输入值。当然，这是一个黑客攻击！

这个问题有替代方案（不那么笨拙！）吗？

以下是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Autocomplete demo</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script>
    $(function () {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            focus: function (event, ui) {
               // This event fires when an item from the menu is selected (in focus)
               // set some variable here to tell the focus() call to the text field not to clear the value from the input field
            },
        });

        $("#tags").focus(function () {
            // clear the input value
            $("#tags").val("");
        });
    });
</script>

<div class="demo">

    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" value="Enter your keywords..." />
    </div>

</div>
</body>
</html>

更新

通过对此解决方案的轻微调整，并在所提供的答案的帮助下，现在可以在IE 8＆amp; 9。

$(document).ready(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $("#tags").autocomplete({
        source: availableTags
    });

    $("#tags").focus(function () {
        // clear the input value
        $("#tags").val("");

      return false;
    });
})

Answer 1

我们遇到了类似的问题，我相信我们通过向return false;方法添加focus来解决此问题：

$("#tags").focus(function () {
        // clear the input value
        $("#tags").val("");

      return false;
    });

此外，您的focus声明之后看起来有一个额外的（尾随）逗号。可能想要清理它。

<强>更新

在jsbin.com中稍微使用了你的代码之后，我想我找到了解决你的IE特定问题的方法，但我不是100％就为什么它只会在IE中死掉。

示例：http://jsbin.com/aqituk/2/edit#javascript,html

差异在于将$(function() { ...更改为完整的文档就绪函数$(document).ready(function() {...

希望这有帮助！

Answer 2

用以下代码替换您的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Autocomplete demo</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script>
    $(function () {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $("#tags").autocomplete({
            source: availableTags
            select: function(event, ui){
               var yourTxt= $(this);
               yourTxt.value = ui.item.value;

           }
        });

        $("#tags").mouseup(function () {
            // clear the input value
            $("#tags").val("");
        });
    });
</script>

<div class="demo">

    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" value="Enter your keywords..."/>
    </div>

</div>
</body>
</html>

Answer 3

我只是厌倦了解决同样的问题。最后，我刚刚采取了以下简单的解决方案：

// onload
$('#foo').autofocus({
    // add options
    disabled: true
});

<input id="foo" onclick="$(this).autocomplete('enable');">

在Internet Explorer中意外调用JQuery UI Autocomplete focus（）

更新

3 个答案: