jqueryUI使用图像下拉菜单自动完成多个数据

时间:2016-03-09 09:47:56

标签: javascript jquery ajax jquery-ui jquery-ui-autocomplete

我尝试了以下代码

$("#txt_external_company_users_search").autocomplete({
        minLength: 0,
        source: function (request, response) {
            $.ajax({url: "user_controller.php", data: {name: $("#txt_external_company_users_search").val(),
                method: 'ajax_search_external_user'},
                dataType: "json",
                type: "POST",
                success: function (data) {
                    response(data.projects);
                    console.info(data);

                }
            });
        },
        focus: function (event, ui) {
            $("#txt_external_company_users_search").val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            $("#txt_external_company_users_search").val(ui.item.label);
            return false;
        }
    })
            .autocomplete("instance")._renderItem = function (ul, item) {
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + "<img style=\"width: 30px; border-radius: 100px;\" src='" + img_path + "' />" + item.id + " - " + item.label + "</a>")
                .appendTo(ul);
    };

这就是我在user_controller.php中获取的ajax请求

echo "{projects : [
        {
            value: 'apple',
            label: 'apple',
            id: '23',
            desc: 'the write less, do more, JavaScript library',
            icon: 'jquery_32x32.png'
        },
        {
            value: 'banana',
            label: 'banana',
            id: '231',
            desc: 'the write less, do more, JavaScript library',
            icon: 'jquery_32x32.png'
        },
        {
            value: 'pineapple',
            label: 'pineapple',
            id: '232',
            desc: 'the write less, do more, JavaScript library',
            icon: 'jquery_32x32.png'
        },


    ]}";

如果我在同一结构中将源指定为普通的js变量,这可以正常工作,但是当我使用ajax请求时它不起作用。请帮忙

0 个答案:

没有答案