JQuery UI Autocomplete 自动触发（IE）答案

【问题标题】：JQuery UI Autocomplete automatically fire (IE)JQuery UI Autocomplete 自动触发（IE）
【发布时间】：2014-04-16 11:03:40
【问题描述】：

我在使用 JQuery 自动完成功能和 Internet Explorer 时遇到了一个非常糟糕的问题。

首先我有一个带有特殊字符值的输入字段，例如：

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" value="Häskell">
</div>

然后我的 JQuery UI 自动完成代码看起来像

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

现在，当我使用 Internet Explorer 访问该站点时，自动完成功能会自动启动并显示“Häskell”条目。（您也可以按 F5 重现该错误）但这仅在输入字段值具有特殊字符（如 ä、ö、...）时才会发生

我还发现了一个 Bug Ticket http://bugs.jqueryui.com/ticket/9796#no1

有人可以帮帮我吗？

非常感谢！

【问题讨论】：

这里有一些解决方案stackoverflow.com/questions/22584016/… 可能会对您有所帮助。

标签： jquery internet-explorer user-interface autocomplete

【解决方案1】：

为防止此类事件，您应该稍微修改一下 jquery ui（这是 IE 的真正错误，部分是 jquery）。问题出在下一个功能中。 IE 提升事件“输入”，而另一个浏览器不提升它。在修改这个函数之前有下一个视图：

input:function(e) {
  if (r) {
    r =! 1, e.preventDefault();
    return;
  }
  this._searchTimeout(e)
}

您应该将其修改为下一个

input:function(e) {
  if (r || typeof(r) == "undefined") {
    r =! 1, e.preventDefault();
    return;
  }
  this._searchTimeout(e)
}

【讨论】：

【解决方案2】：

也面临这个问题，但在初始化时有任何输入值。通过添加超时解决。

$(function () {
    setTimeout(function(){
        $("selector").autocomplete({
           // autocomplete options
        }),
    1000);
});

【讨论】：

【解决方案3】：

我最近遇到了这个问题，输入值包含西里尔字母。

我在没有破解 jQuery UI 自动完成小部件代码的情况下实现了以下解决方法。与以前的解决方案相比，它可以在本地环境中实施。因此，当您在其中的表单元素上初始化自动完成时，它可能很有用，例如您自己的固定 jQuery 插件。

var flagAutoCompleteInitDone;

// we assume that user will not start fill-in the form immediately
setTimeout(function(){flagAutoCompleteInitDone =true;}, 1000);

$('selector')
    .each(function(){  // IE11 hack
        // first we handle 'input' event and prevent its further propagation
        // until our variable is initialized with setTimeout() handler call
        this.addEventListener('input', 
            function(ev){   
                if( typeof flagAutoCompleteInitDone === 'undefined'){
                    ev.stopImmediatePropagation();
                }
            }, false);
    }) // /IE11 hack
    .autocomplete({
        /* your autocomplete options */
    });

在 jQueryUI 版本上测试。 1.11.4 和 jQuery 1.6.1+

【讨论】：