Question

我正在使用jQuery jquery-1.10.2和jQuery ui 1.11.4

以下是自动完成功能：

$("#txtPOI").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: '<?php echo site_url("crowd/get_POIs") ?>',
            data: {cat: selectedCode, q: request.term},
            dataType: "json",
            type: "post",
            success: function(data) {

                response( $.map( data, function( item )
                {
                    return{
                            label: item.title,
                            value: item.title,
                            contentid: item.contentid,
                            latitude: item.latitude,
                            longitude: item.longitude
                        }
                }));

            },
            fail : function ( jqXHR, textStatus, errorThrown ) {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            select: function( event, ui ) {
                $("#txtPOI").val(ui.item.latitude);
                alert('selected');
                /*
                alert(ui.item.contentid);
                log( ui.item ?
                  "Selected: " + ui.item.label :
                  "Nothing selected, input was " + this.title);
                alert(ui.item.value);
                */
            },
            open: function(event, ui) {
                $(".ui-autocomplete").css("z-index", 1000);
            },
            minLength: 3

        });
    }
});

ajax响应成功从数据库返回数据。但是当我试图在select内部做某事时，似乎没有触发select。在选择自动填充项目时，我希望获得ui.item.contentid以及ui.item.latitude和ui.item.longitude的值。

为什么select事件未被触发？如何解决这个问题？

Answer 1

选择自动完成对象的选项，而不是Ajax对象。

试试这个：

$("#txtPOI").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: '<?php echo site_url("crowd/get_POIs") ?>',
            data: {cat: selectedCode, q: request.term},
            dataType: "json",
            type: "post",
            success: function(data) {

                response( $.map( data, function( item )
                {
                    return{
                            label: item.title,
                            value: item.title,
                            contentid: item.contentid,
                            latitude: item.latitude,
                            longitude: item.longitude
                        }
                }));

            },
            fail : function ( jqXHR, textStatus, errorThrown ) {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    },
    select: function( event ) {
         // do what ever you want to do...
    }
});

jQuery自动完成选择未触发

1 个答案: