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

时间:2015-01-05 04:06:54

标签: 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>

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

1 个答案:

答案 0 :(得分:1)

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;
        }            

    });
});