Question

我今天试图在这里阅读，我在这里找不到答案，也没有通过Google找到答案。我希望有人可以帮忙说“你是白痴，这是做这件事的方式”，我可以继续我的生活。：）

我安装了jquery UI autocomplete插件并且运行正常。我添加了autoFocus: true，我现在可以选中，它会选择第一个可用的选项。但是，如果输入元素上有focusout，则自动完成不会通过选择第一个选项强制进行选择。我已经尝试了许多不同的，可怕的方法来强制这种情况发生，我已经完成了它，但它使我的系统滞后并使页面崩溃。

我现在正在运行我的应用jQuery v1.10.2，jQuery UI Core 1.9.1和jquery UI Autocomplete 1.10.4。

当前的自动填充事件：

$("#element").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
        $('#element').val(ui.item.value);
        getOptions();
    },
    autoFocus: true, 
    html: false, 
    open: function(event, ui) {
        $(".ui-autocomplete").css("z-index", 1000);
    }
});

这样可以正常工作，但是我的页面会滞后，会导致浏览器崩溃。这里有一些形式的无限循环我可以看到，但似乎无法理解以便修复：

$("#element").click(function() {
    $("#element").blur(function() {
        $('.ui-autocomplete .ui-menu-item:first-child').click();
        $("#quantity").focus();
    });
});

再次感谢您的帮助。我当然希望这是“DOH！这是问题所在。”有点问题，我只需要一套新的眼睛。：）

Answer 1

Welp，我给了它大约一个小时，只有六个观点。我能够得到一些有用的东西。它会在所有浏览器中运行吗？只有时间，而且很可能是很多小时的挫折感。

$("#element").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
        $('#element').val(ui.item.value);
        getOptions();
    },
    autoFocus: true,
    mustMatch: true,
    html: false,
    open: function(event, ui) {
        $(".ui-autocomplete").css("z-index", 1000);
    }
}).blur(function() {
    if($('#element').val() != $('#element').data('selected-item')) {
        if($('.ui-autocomplete').length) {
            $('.ui-autocomplete .ui-menu-item:first-child').click();
            $('#quantity').focus();
        }
    }
});

我使用blur来获取失去对输入字段的关注的事件。如果输入字段的值不等于先前选择的值，那么我检查以确保ui-autocomplete元素存在。如果是，那么我在ui-menu-item元素的第一个子元素上强制执行单击事件，这是结果列表。我担心的是第一个孩子选择器和一些跨浏览器问题，我相信我在IE中的第一次测试并不是那么好。但是，对于Chrome / FF / Safari？它完美无缺！

jQuery UI自动完成autoFocus没有绑定鼠标

1 个答案: