javascript - 无法在 jquery 自动完成中获取所选项目

标签 javascript jquery autocomplete

使用 Jquery 自动完成 UI 小部件,我有以下代码通过外部 php 获取郊区/邮政编码列表:

    <script>

    $(function() {
        $("#suburb").autocomplete({

            minLength:3, //minimum length of characters for type ahead to begin
            source: function (request, response) {
                $.ajax({
                    type: 'POST',
                    url: 'resources/php/helpers.php', //your server side script
                    dataType: 'json',
                    data: {
                        suburb: request.term
                    },

                    success: function (data) {
                        //if multiple results are returned
                        if(data.localities.locality instanceof Array)
                            response ($.map(data.localities.locality, function (item) {
                                return {
                                    label: item.location + ', ' + item.postcode,
                                    value: item.location + ', ' + item.postcode
                                }
                            }));
                        //if a single result is returned
                        else
                            response ($.map(data.localities, function (item) {
                                return {
                                    label: item.location + ', ' + item.postcode,
                                    value: item.location + ', ' + item.postcode
                                }
                            }));
                    },

                    select: function (event, ui) {
                        alert("SELECT");
                        $('#postCode').val("POSTCODE");
                        return true;
                    }
                });
            }

        });
    });
</script>

自动完成本身运行良好,我得到了匹配列表,但是“选择”部分不起作用,即我需要将另一个输入文本值设置为所选值,但即使在上面的代码中,警报对话框没有被调用 - 我看到的各种语法让我有点困惑,所以我不确定我在这里做错了什么。

最佳答案

select函数应该位于发送到ajax方法的对象之外。

试试这个:

$(function() {
    $("#suburb").autocomplete({

        minLength:3, //minimum length of characters for type ahead to begin
        source: function (request, response) {
            $.ajax({
                type: 'POST',
                url: 'resources/php/helpers.php', //your server side script
                dataType: 'json',
                data: {
                    suburb: request.term
                },

                success: function (data) {
                    //if multiple results are returned
                    if(data.localities.locality instanceof Array)
                        response ($.map(data.localities.locality, function (item) {
                            return {
                                label: item.location + ', ' + item.postcode,
                                value: item.location + ', ' + item.postcode
                            }
                        }));
                    //if a single result is returned
                    else
                        response ($.map(data.localities, function (item) {
                            return {
                                label: item.location + ', ' + item.postcode,
                                value: item.location + ', ' + item.postcode
                            }
                        }));
                }
            });
        }, 

        select: function (event, ui) {
            alert("SELECT");
            $('#postCode').val("POSTCODE");
            return true;
        }            

    });
});

关于javascript - 无法在 jquery 自动完成中获取所选项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27773265/

相关文章:

javascript - 如何从客户端调用服务器端按钮单击功能?

javascript - 拖放调整拖放区大小

Flash Builder 4 突然停止对某些类进行自动完成

javascript - 诺基亚 OVI map 自动完成功能

html - 如何在不关闭浏览器自动完成建议的情况下改进它们?

javascript - 如何在 ReactJs 的 Textarea 中设置光标位置?

javascript - React hooks 的使用效果

javascript - AngularJs:如何使用 http.get 将多个 json 文件调用到表中

javascript - 模态背景模糊

javascript - 此处文档中的 JQuery 不起作用