2014-04-23 76 views
1

这是我的工作代码,直到获取表格格式的自动完成列表。但如何给头附加函数?jquery append函数不工作?

<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); 


     }; 
    }); 
} 

+0

宽度= 200像素是无效的HTML ... –

+0

你需要添加'左右宽度='200px''报价? – roydukkey

+0

@roydukkey否它应该是没有px width =“200” –

回答

0

定制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

+0

感谢您的答复,但它不符合我的要求。你能帮我以表格格式显示数据吗?@Vineet Kadkol – sona

+0

@sona你能让我们我知道你需要什么格式..? –

+0

我已经得到了解决方案,但我想在表格中添加标题。可以帮助我更新我的最新代码。@ vineet Kadkol – sona