ASP.Net: Display formatted AutoComplete List in jQuery AutoComplete plugin

nauna
 
on Jul 21, 2022 05:04 AM
Sample_122374.zip
324 Views

hello,

Display formatted List in ASP.Net AJAX AutoCompleteExtender

I used jQuery auto complete, the data is loading but not sure why its not coming in formatted div here is my jQuery.

please advice

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=txtSearch.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/MyService.asmx/GetCustomers") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0] + item.split('-')[1],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
            },
            minLength: 1


            
        }) .autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append('<a href="#" data-toggle="modal" data-target="#myModal19">'
            + '<div class="pull-left">'
            + '<img src="UserImages/' + item.val + '" class="img-circle" alt="User Image" /> </div>'
            + '<div style=""><p>' + item.label + '</p></div></a>') //You can format the design in above code in whatever format you want.
.appendTo(ul);
};
Download FREE API for Word, Excel and PDF in ASP.Net: Download
Shivam.M
 
on Jul 21, 2022 05:59 AM

Hi nauna,

Please refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />

<script type="text/javascript">
    $(function () {
        $("[id$=txtSearch]").autocomplete({
            minLength: 1,
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/CS.aspx/GetDetails") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    }
                });
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            var div = $("<li/>")
                .append('<span style="float:left;">' + item.label.split('-')[0] + '</span><span style="float:right;">' + item.val + '</span><br/>')
                .appendTo(ul);
            return div;
        };
    });
</script>
<asp:TextBox ID="txtSearch" runat="server" />

Namespace

C#

using System.Web.Services;

VB.Net

Imports System.Web.Services

Code

C#

[WebMethod]
public static string[] GetDetails(string prefix)
{
    List<string> customers = new List<string>();
    customers.Add(string.Format("{0}-{1}", "Shayak", "Student"));
    customers.Add(string.Format("{0}-{1}", "Nayak", "Teacher"));
    customers.Add(string.Format("{0}-{1}", "Sudha", "Manager"));
    return customers.ToArray();
}

VB.Net

<WebMethod>
Public Shared Function GetDetails(ByVal prefix As String) As String()
    Dim customers As List(Of String) = New List(Of String)()
    customers.Add(String.Format("{0}-{1}", "Shayak", "Student"))
    customers.Add(String.Format("{0}-{1}", "Nayak", "Teacher"))
    customers.Add(String.Format("{0}-{1}", "Sudha", "Manager"))
    Return customers.ToArray()
End Function

Screenshot