jquery ui 自动完成更改事件答案

【问题标题】：jquery ui autocomplete change eventjquery ui 自动完成更改事件
【发布时间】：2015-03-17 05:06:24
【问题描述】：

我正在尝试让 Jquery 自动完成以仅允许选择项。我使用更改事件来检测：

 change: function (event, ui) {
            if (ui.item) {
                $(this).val('');
            }
        }

它在 IE 中运行良好。但在 chrome ui.item 中，即使该项目是从列表中选择的，也始终为 null。

然后我尝试了另一种方法。并改为检查事件类型：

 if (event.originalEvent.type != "autocompletechange") {
            $(this).val('');
        }

它在 Chrome 中运行良好，但在 IE 中，事件是“模糊”。

有适合两种浏览器的解决方案吗？？

谢谢，尤瓦尔。

【问题讨论】：

它可以在这里正常工作：jsfiddle.net/seLLupx2 你能make a MCVE吗？

标签： jquery jquery-ui events cross-browser

【解决方案1】：

我遇到了同样的问题，不得不解决它。似乎没有解决办法。

jQuery 的自动完成功能仅在 select 事件上发送 event 和 ui 对象。不幸的是，在change 事件中没有发送任何对象。

这就是我所做的，它似乎工作顺利：

$('#autocomplete-input').autocomplete({ 
    source : fields, // fields is an array of objects with field_name and field_id

    change : function() {

        var input = $('#autocomplete-input').val().trim();

        if ( input.length > 0 ) {

            var field_found = false;
            $.each( fields, function( index, value ) {
                if ( input == fields[index]['field_name'] )
                    field_found = fields[index]['field_id'];
            });

            if ( field_found ) {

                $('#field-selected-hidden').val( field_found ); 
            } else {

                $('#field-selected-hidden').val('');
            }

        } else {

            $('#field-selected-hidden').val('');
        }
    }
});

它的基本作用是：如果输入字段的值发生变化，它会搜索预先设置的自动完成字段的数组（源）。如果它的值等于新字段值更改为的值，它将隐藏表单字段设置为字段的 id（或您要捕获的任何字段）。

希望对你有帮助...

【讨论】：