Question

$("#shout_field").live('keydown', function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length >= 2) {
                    $.ajax({
                        type: "POST",
                        url: "/data/people.asp",
                        dataType: "json",
                        data: {
                            term: term
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (c) {
                                return {
                                    id: c.id,
                                    label: '<b>' + c.img + '</b>' + c.label,
                                    value: c.value
                                }
                            }));
                        }
                    });
                } else {
                    results = ['Type someones name to tag them in the status...'];
                }
            }
            response(results);
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);

            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join("");

            $('body').data('tagged', this.value)

            var tagged_users = $("#tagged_users").val();
            $("#tagged_users").val(tagged_users + ui.item.id + ',')

            return false;
        }
    });

我能正常做到但是自动完成来自远程通话我感到困惑...... :(

我感兴趣的是c.img在<b>标签中的部分，它不会呈现为HTML ...

Answer 1

您应该覆盖插件的私有方法_renderItem() 为每个要显示的项目调用此函数。

第一个参数表示插件为显示菜单而创建的<ul>元素。第二个参数是当前数据项。

默认情况下，该插件会生成<ul>，因此在您的覆盖_renderItem()中，您应该继续制作<li>，但您可以在其中添加任何内容。

对于你的情况，我会返回一个非常不同的数组数据对象，它只是为了存储数据，所以最好将所有内容分开：

return {
    id: c.id,
    label: c.label,
    imgUrl: c.img,
    value: c.value
}

要实现自定义呈现方法，只需为插件实例重新定义一个新函数即可。这是如何工作的？

当您调用$('#myelement').autocomplete()插件实例化并
时
1. 生成必要的标记等
2. 将插件实例作为jquery数据添加到元素#myelement，名称为“autocomplete”
然后可以通过$('#myelement').data('autocomplete');
然后，您可以为方法_renderItem

这给出了：

$("#shout_field").autocomplete({
    ...
})
.data('autocomplete')  // get the instance of the plugin
._renderItem = function( ul, item ) {  // change the _renderItem method

    // "item" is the current data item, so { id, label, imgUrl, value }


    return $( "<li></li>" ) // generate a <li> element

            // store the data item (used by the plugin)
            .data( "item.autocomplete", item )

            // create the display you want into the <li>
            .append( '<img src="' + item.imgUrl + '" />' + '<a>' + item.label + '<br>' + item.desc + '</a>' )

            // add the <li> to the list
            .appendTo( ul );

};

如何在此jquery自动完成脚本中包含图像？

1 个答案: