如何使用多列结果实现自动完成文本框 [英] how to implement autocomplete textbox with multicolumn results

问题描述

我想做自动完成文本框，它会将结果显示为表格或网格

例如

假设我有文本框用户将在文本框中输入一些字符串，数据将从数据库中获取

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

推荐答案

（'＃divSearchResult'）[0] .innerText =;
// document.getElementById（login_box_content）。innerHTML =;
if（

('#divSearchResult')[0].innerText = ""; // document.getElementById("login_box_content").innerHTML = ""; if (

（'＃txtSearch'）。val（）。trim（）！=）{

('#txtSearch').val().trim() != "") {

（ #Pageloading）显示（）;
var param = {keyword：

("#Pageloading").show(); var param = { keyword:

这篇关于如何使用多列结果实现自动完成文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！