jQuery自动完成,将成功数据传递给select方法

时间:2017-01-03 20:29:47

标签: jquery jquery-ui-autocomplete

我有json响应,它有一些属性。我为列表创建了一个数组。当我单击列表项时,某些输入将按项目ID填充。

要做到这一点,我正在考虑将完整数据对象传递给select方法,然后如果从列表中单击某个项目,我将在数据对象中搜索id,如果我找到,我将把它们全部打印到输入。 但是,将fullObj数据传递给select方法我无法取得成功。它返回未定义的错误。 这是我的代码:

$( "#musteriId" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : '/musteri-bul',
            dataType: "json",
            data: {
                name_startsWith: request.term,
            },
            success: function( data ) {
                //console.log(data);
                var arr = [];
                var i = 0;
                var fullObj = data;
                $.each(data, function(index, value){
                    console.log(index);
                    var obj = {
                        label: index
                    };
                    arr[i] = obj;
                    i++;
                });
                response(arr, fullObj);
            }
        });
    },
    minLength: 3,
    select: function(event, ui ) {
        console.log(fullObj);
    },
});

2 个答案:

答案 0 :(得分:0)

首先,进行ajax调用,然后在成功回调时,使用现有数据启动autocomplete

$.ajax({
    url : '/musteri-bul',
    dataType: "json",
    data: {
        name_startsWith: request.term,
    },
    success: function( data ) {
        //console.log(data);
        var arr = [];
        var i = 0;
        var fullObj = data;
        $.each(data, function(index, value){
            console.log(index);
            var obj = {
                label: index
            };
            arr[i] = obj;
            i++;
        });

        $( "#musteriId" ).autocomplete({
            source: arr,
            minLength: 3,
            select: function(event, ui) {
                console.log(fullObj);
            },
        });
    }
});

答案 1 :(得分:0)

我已经解决了。我刚刚向obj添加了一些属性然后传递。

$( "#musteriId" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : '/musteri-bul',
            dataType: "json",
            data: {
                name_startsWith: request.term,
            },
            success: function( data ) {

                var arr = [];
                var i = 0;
                var fullObj = data;
                $.each(data, function(index, value){
                    $.each(value, function(idx, v){
                        var obj = {
                            label: idx,
                            value: v,
                            phone: 12313
                        };
                        if(idx == "isim"){
                            arr[i] = obj;
                            i++;
                        }
                    });
                });
                response(arr, fullObj);
            }
        });
    },
    minLength: 3,
    select: function(event, ui ) {
        console.log(ui);
    },
});