Question

这是我的工作代码，直到以表格格式获取自动完成列表。但是如何给出带有追加功能的标题？

<script type="text/javascript">

function pageLoad(sender, args) {
    $(function () {
        $("#<%=txt.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Webservice.asmx/GetDetails") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    async: false,
                    mustMatch: true,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('^')[0],
                                val: item.split('^')[1]
                            }
                        }))
                    },
                    error: function (response) {

                    },
                    failure: function (response) {

                    }
                });
            },
            select: function (e, i) {
                $("#<%=hdnC.ClientID %>").val(i.item.val);
                if (i.item.val == "No Records Found") {
                    $("#<%=hdnC.ClientID %>").val(-1);
                    document.getElementById('<%=txt.ClientID%>').value = "";
                    return false;
                }

            },
            minLength: 0
        }).bind('focus', function () { $(this).autocomplete("search"); })
        .data("autocomplete")._renderItem = function(ul, item) {
            return $("<li></li>").data("item.autocomplete", item).append("<a><table><tr><td width='200px'>" + item.label + "</td>" + "<td>" + item.val.split('~')[6] + "</td></tr></table></a>").appendTo(ul);


         };
    });
}

Answer 1

自定义jquery自动完成功能的完美工作示例。

$(document).ready(function(){
  $("#birds").autocomplete({
    source: "birds/get_birds" // name of controller followed by function
  }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="img/' + item.image + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.description + '</div></div></a>';
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append(inner_html)
            .appendTo( ul );
    };
});

http://www.codersmount.com/2013/06/jquery-ui-autocomplete-in-codeigniter-with-images-and-database/?subscribe=success#blog_subscription-2

Jquery追加功能不起作用？

1 个答案: