jQuery AutoComplete，自定义返回数据

Question

我正在尝试创建一个自动完成框，但由于返回自定义数据而遇到问题，我似乎无法让它填充自动完成框。

这是数据（JSON）：

[{"user_id":"1","user_name":"jarru"},{"user_id":"2","user_name":"harryq"},{"user_id":"3","user_name":"sleet"}]

这是我正在使用的 javascript：

<script type="application/javascript">
$(document).ready(function(){
    $("#add_email_user").autocomplete({
            source: baseurl+"users/ajax/users/",
                        dataType: 'json',
                        success: function(data) {
                        console.log("asd");
                          response($.map(data, function(item) {
                            return {
                              label: item.user_name,
                              value: item.user_id
                            }
                          }));
                          }
        });

});
</script>

当我使用这段代码时，什么也没有发生，大约有一个 3px 的下拉菜单，里面什么都没有。正在正确请求数据（如 FireBug 控制台报告的那样），但下拉菜单中没有填充任何内容。

Answer 1

您需要做的是提供自己的_renderItem 函数。 API 中的 example 向您展示了如何做到这一点。也可以看一下插件的源代码，看看它是如何正常完成的。

$( "#project" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
    }
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
};