Click here to Skip to main content
14,868,488 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi All ,

I have a multiple select autocomplete textbox which is working perfectly . Now I need to add headers to each column.I have tried many examples in net but nothing works . Someone please help. Any help will be really appreciated.

What I have tried:

JavaScript
<pre> <script type="text/javascript">
        $(function () {
            
            $("#<%=search.ClientID %>").autocomplete({
               
                minLength: 3,
                scroll:true,
                source: function (request, response) {
                    $.ajax({
                        url: 'sample1.aspx/GetPatientAllDetails',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    val: item.split(',')[0],
                                    Name: item.split(',')[1],
                                    dob: item.split(',')[2],
                                    eid: item.split(',')[3],
                                    Mob: item.split(',')[4],
                                    regst: item.split(',')[5],
                                    img: item.split(',')[6],
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (event, ui) {
                    alert(ui.item.val);
                    //$("#<%=search.ClientID %>").val(ui.item.Name);
                 },

            })
                .data("ui-autocomplete")._renderItem = function (ul, item) {
                    var imgpath = "../Administrator/Profilepics/";
                return $("<li>")
                    .append('<a>'
                        + '<table><tr></tr><tr>'
                        + '<td style="width:80px;"><img style="border-radius: 60%;height:30px;" src=' + imgpath + item.img + ' alt=""  /></td>   '
                        + '<td style="width:80px">' + item.val + '</td>   '                        
                        + '<td style="width:200px">' + item.Name + '</td>   '
                        + '<td style="width:80px">' + item.dob + '</td>   '
                        + '<td style="width:150px">' + item.eid + '</td>   '
                        + '<td style="width:80px">' + item.Mob + '</td>   '
                        + '<td style="width:80px">' + item.regst + '</td>'
                        + '</tr></table></a>')
                    .appendTo(ul);
            };
        });
    </script>	 




C#
<pre>  [WebMethod]
        public static string[] GetPatientAllDetails(string prefix)
        {
            
            List<string> customers = new List<string>();
            using (SqlConnection conn = new SqlConnection())
            {
                conn.ConnectionString = ConfigurationManager.ConnectionStrings["RS_ConnectionString"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "SELECT TOP 50 IN027_02,IN027_03,FORMAT(IN027_04,'dd/MMM/yyyy') as IN027_04,IN027_27,IN027_17,FORMAT(IN027_11,'dd/MMM/yyyy') as IN027_11,case when In027_45='' then 'default.jpg' else In027_45 end as IN027_45 from in027 WHERE IN027_03 LIKE @SearchText + '%'  group by  IN027_02,IN027_03,IN027_04,IN027_05,IN027_27,IN027_17,IN027_11,IN027_45";
                    cmd.Parameters.AddWithValue("@SearchText", prefix);
                    cmd.Connection = conn;
                    conn.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            customers.Add(string.Format("{0},{1},{2},{3},{4},{5},{6}", sdr["IN027_02"], sdr["IN027_03"], sdr["IN027_04"], sdr["IN027_27"], sdr["IN027_17"], sdr["IN027_11"], sdr["IN027_45"]));
                        }
                    }
                    conn.Close();
                }
            }
            return customers.ToArray();
        }
Posted
Comments
20212a 10-Feb-21 9:47am
   
I am not sure what a header is in reference to autocomplete but the first google result for me seems to explain how to do it. How to add header to a jQuery UI autocomplete - Stack Overflow[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900