Javascript jquery ui使用google places自动完成-强制选择并在上下箭头移动时删除原始输入

我一直在关注jQueryUIAutoComplete，它从GooglePlaces获取数据

我遇到的问题是，一旦用户开始通过上下箭头查看建议列表，原始输入也会出现在最后。我想删除这个原始输入，否则如果用户点击进入表单保存而不强制选择

// Autocomplete location with google places API
    $("#edit_profile .location").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/words/lib/ajax.php",
                type: "GET",
                data: "autocomplete_location=1&term=" + request.term,
                cache: false,
                success: function(resp) {
                    try {
                        json = $.parseJSON(resp);
                    } catch (error) {
                        json = null;
                    }
                    //
                    if (json && json.status == "OK") {
                        //
                        response($.map(json.predictions, function(item) {
                            return {
                                label: item.description,
                                value: item.description
                            }
                        }));
                        //
                    }
                }
            });
        },
        minLength: 1,
        change: function (event, ui) {
            if (!ui.item){
                $(this).val("");
            }
        }
    });

---

我不确定我是否正确地回答了问题，但如果我回答了，请尝试“聚焦”方法而不是“改变”方法

因此，代码如下所示：

// Autocomplete location with google places API
$("#edit_profile .location").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/words/lib/ajax.php",
            type: "GET",
            data: "autocomplete_location=1&term=" + request.term,
            cache: false,
            success: function(resp) {
                try {
                    json = $.parseJSON(resp);
                } catch (error) {
                    json = null;
                }
                //
                if (json && json.status == "OK") {
                    //
                    response($.map(json.predictions, function(item) {
                        return {
                            label: item.description,
                            value: item.description
                        }
                    }));
                    //
                }
            }
        });
    },
    minLength: 1,
    focus: function (event, ui) {
        if (!ui.item){
            $(this).val("");
        }
    }
});

---

您无法通过之前发生的更改事件捕获此事件，因此我尝试将其更改为焦点事件，但此事件仅在您从建议列表中选择smth时触发。此外，我认为默认行为具有逻辑性，因为如果我在列表中未找到所需内容，我希望可以选择返回并继续键入

但无论如何，如果您想改变这种行为，可以在ajax返回后阻止用户访问输入字段。 例如，将建议框放置在输入字段上

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: block; width: 298px;">

---

以下是问题。

您是否担心在自动完成菜单可见时点击

[Enter]

时禁用默认操作

如果是这样的话，这里有一个解决方案：在输入中添加一些标志，如果设置了该标志，则防止对keydown执行默认操作：

var $input = $('input[name="name"]');

$input.on('keydown', function(e) {
    if ( $(this).data('acShown') && e.which == 13 /*enter key*/){
        e.preventDefault();
    }
});
$input.autocomplete({
    source: function (request, response) {
        setTimeout(function () {
            $input.data('acShown', true); //set the flag when showing the menu
            response(data)
        }, 300);
    },
    close: function(){
        $input.data('acShown', false); //unset the flag on close
    }
});

---

在小提琴中：如您所见，当显示菜单时，当焦点集中在输入上时点击

[Enter]

不会触发表单提交-您将停留在当前页面上。

不，这没有帮助。您有运行的示例吗？我想我可以找到一个解决方案，但我不确定我是否找到了问题。找到了这个解决问题的方法@AlexKneller太好了！这是有效的：）你能给我一个答案吗，也许可以解释一下，我会接受的！谢谢这听起来像是一个解决方案，但实际上隐藏输入并不是一个很好的解决办法。是的！我关心的正是在输入时提交表单。