how to implement autocomplete textbox with multicolumn results

See more:

ASP.NET

Javascript

jQuery

Hi,
I want to do autocomplete textbox which will display result as a table or grid
For eg
suppose i have textbox user will enter some string in the textbox ,the data will be fetched from database

(select name,country,city,location ,status from userinfo where name contain()...)

public static AssetDTO[] GetAssetSearch(string keyword)
   {
       try
       {

           AssetCardBLL objbll = new AssetCardBLL();
           AssetDTO AssetDto = new AssetDTO();
           AssetDto.StrAllData = keyword;
           List<AssetDTO> objdto = objbll.getSearch(AssetDto);
           return objdto.ToArray();
       }
       catch (Exception ex)
       {
           throw ex;
       }
   }

function showSearchResult() {


      $('#divSearchResult')[0].innerText = "";
     // document.getElementById("login_box_content").innerHTML = "";
      if ($('#txtSearch').val().trim() != "") {

          $("#Pageloading").show();
          var param = { keyword: $('#txtSearch').val() };
          $.ajax({
              url: "AssetCard.aspx/GetAssetSearch",
              data: JSON.stringify(param),
              dataType: "json",
              type: "POST",
              contentType: "application/json; charset=utf-8",
              dataFilter: function (data) { return data; },
              success: function (data) {


                  // response($.map(data.d, function (item) {
                  var rows = "";
                //  document.getElementById("login_box_content").innerHTML = "";

                //  rows = "<tr >"
                //+ "<td style='width:40px;' >Barcode No.</td>"

                //+ "<td style='width:80px;'>Company Inv No.</td>"
                //+ "<td style='width:70px;'>Serial No</td>"
                //+ "<td style='width:110px;'>Mfg/Model No.</td>"
                // + "<td style='width:100px;'>Location</td>"
                //  + "<td style='width:60px;'>Status</td>"
                //+ "</tr> ";

                  //  $('#login_box_content').append(rows);

                  if (data.d.length > 0) {
                      rows = "<table>"

                      rows = rows + "<tr >"
                      rows = rows + "<td style='width:40px;' >Barcode No.</td>"

                      rows = rows + "<td style='width:80px;'>Company Inv No.</td>"
                      rows = rows + "<td style='width:70px;'>Serial No</td>"
                      rows = rows + "<td style='width:110px;'>Mfg/Model No.</td>"
                      rows = rows + "<td style='width:100px;'>Location</td>"
                      rows = rows + "<td style='width:60px;'>Status</td>"
                      rows = rows + "</tr> ";

                      for (var i = 0; i < data.d.length; i++) {

                          rows = rows + "<tr>"
                          rows = rows +  "<td id='assetno" + i + "' runat='server' style='width:40px;cursor:pointer' onclick='getValuesInvNum(" + data.d[i].Inv_IdCoInv.trim() + ");'   >" + data.d[i].Inv_IdCoInv.trim() + "</td>"

                          rows = rows +  "<td id='compinven" + i + "' runat='server' style='width:80px;cursor:pointer' onclick='getValuesInvNum(" + data.d[i].Inv_IdCoInv.trim() + ");'  >" + data.d[i].Old_inventory_no.trim() + "</td>"
                          rows = rows +  "<td id='serialnum" + i + "' runat='server' style='width:70px;cursor:pointer' onclick='getValuesInvNum(" + data.d[i].Inv_IdCoInv.trim() + ");'   >" + data.d[i].Serial_no.trim() + "</td>"
                          rows = rows + "<td id='model_no" + i + "' runat='server' style='width:110px;cursor:pointer' onclick='getValuesInvNum(" + data.d[i].Inv_IdCoInv.trim() + ");'   >" + data.d[i].Mfg_model_Text.trim() + "</td>"
                          rows = rows +  "<td id='LOC" + i + "' runat='server' style='width:100px;'   >" + data.d[i].LocationHeading.trim() + "</td>"
                          rows = rows +  "<td id='STATUS" + i + "' runat='server' style='width:60px;'    >" + data.d[i].Status.trim() + "</td>"
                          rows = rows +  "</tr> ";

                        //  $('#login_box_content').append(rows).css("height", "460px");
                          //   }))

                      }

                      rows = rows + "</table>"

                      $('#login_box_content')[0].innerHTML = rows;
                      $('#login_box_content').show();
                      $("#Pageloading").hide();
                  }
                  else {
                      $("#Pageloading").hide();
                      $('#divSearchResult')[0].innerText = "No Record Found";
                      //  document.getElementById("login_box_content").innerHTML = "";
                      $("#login_box_content").hide();
                      var loginBox = $("#login_box");
                      loginBox.fadeOut("fast");
                      return false;

                  }
                  //   + "<td id="Td8" runat='server' style='width:40px;cursor:pointer' onclick='javascript:return getValuesInvNum('" + data.d[i].Inv_IdCoInv + "','assetno'); return false ;'   >" + data.d[i].Inv_IdCoInv + "</td>"
                  $('#login_box_content').removeHighlight();
                  $('#login_box_content').highlight($('#txtSearch').val());

                  var loginBox = $("#login_box");
                  loginBox.fadeIn("fast");
                  return false;

              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {

                  // alert(textStatus);
              }
          });

      }

      else {


          $("#Pageloading").hide();
          //   document.getElementById("login_box_content").innerHTML = "";
          $("#login_box_content").hide();
          var loginBox = $("#login_box");
          loginBox.fadeOut("fast");
        //  return false;
      }
  }