Question

我遵循jquery ui自动完成功能，从谷歌地方抓取数据......

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

// 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("");
            }
        }
    });

Answer 1

我不确定我是否以正确的方式得到问题，但如果我这样做，请尝试“聚焦”方法而不是“改变”方法。

所以代码看起来像这样：

// 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("");
        }
    }
});

Answer 2

你无法通过之前发生的变更事件过程来捕捉到这一点，所以我尝试将其更改为焦点事件，但此事件仅在您从建议列表中选择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;">

这是demo。

Answer 3

当您看到自动填充菜单时，您是否担心在点击[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
    }
});

fiddle

在小提琴中：正如您所看到的，当显示菜单时，当焦点在输入上时点击[Enter]将不会触发表单提交 - 您将保留在当前页面上。

jquery ui自动完成与谷歌的地方 - 强制选择并删除原始输入向上向下箭头

3 个答案: