如何在不使用 ajax 扩展或 web 服务的情况下在文本框中提供自动完成功能？答案

【问题标题】：How to provide auto complete within a textbox without using ajax extension or webservice?如何在不使用 ajax 扩展或 web 服务的情况下在文本框中提供自动完成功能？
【发布时间】：2014-04-30 20:54:11
【问题描述】：

我的网络表单上有一个文本框。我想将此文本框与我的数据库表中的“名称”列绑定。我希望当用户在此文本框中键入字母时，然后根据与字母匹配的数据，建议将像任何其他搜索引擎一样在下拉列表中给出。我想在不使用 Ajax Autocomplete 扩展器或任何 Web 服务的情况下做到这一点。我尝试通过 Jquery 执行此操作，但我使用静态名称执行此操作。我希望从数据库中获取这些名称。请指导我该怎么做？ aspx 页面-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
      $(function () {
          var items = [
  "Argo",
  "Alex",
  "Mike",
  "Mark",
  "Joseph",
  "John",
  "Alex",
  "Marrie"
  ];
          $("#TextBox1").autocomplete({
              source: items
          });
            });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
    <tr>
    <td>Name:</td>
    <td>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
    </tr>
    </table>
    </div>
    </form>
</body>
</html>

【问题讨论】：

标签： c# javascript jquery autocomplete textbox

【解决方案1】：

如果您想从数据库中读取某些内容，则应该有一些服务器端脚本，因此您需要网络服务来执行此操作。

【讨论】：

是的，我想从数据库中读取名称。就像 Google 搜索框一样，使用它在下拉列表中向用户提供建议。通过这样做，我将能够在文本框中使用自动完成。
无论如何你都必须引入一些服务器端调用。在“谷歌即时”中，它也会在每次击键时进行服务器端调用。

【解决方案2】：

这是可以做到的-

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script type="text/javascript">
      $(function () {
      var items=[<%=autotag %>];
      $("#TextBox1").autocomplete({
      source:items
      });
      });
  </script>
<body>
    <form id="form1" runat="server">
    <div class="article" id="article">
    <table>
    <tr>
    <td>Name:</td>
    <td>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
    </tr>
    </table>
    </div>
    </form>
</body>

在cs代码中-

public string autotag="";
    protected void Page_Load(object sender, EventArgs e)
    {
        bind1();
    }
    public void bind1()
    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);
        con.Open();
        string query="select name from tbl_data_show";
        SqlCommand cmd=new SqlCommand(query,con);
        SqlDataReader dr=cmd.ExecuteReader();
        dr.Read();
        while(dr.Read())
        {
            if(string.IsNullOrEmpty(autotag))
            {
                autotag+="\""+dr["name"].ToString()+"\"";
            }
            else
            {
                autotag+=", \""+dr["name"].ToString()+"\"";
            }
        }
    }

【讨论】：