CODEWITHSUNDEEP
c#javascriptjqueryautocompletetextbox
Omi
Omi

Reputation: 447

How to provide auto complete within a textbox without using ajax extension or webservice?

I have a textbox on my web form. I want to bind this textbox with the column "name" in my database table. I want that when the user will type alphabets in this textbox then based on the data matching with the alphabet the suggestion will be given in a dropdown just like any other search engine. I want to do it without using Ajax Autocomplete extender or any web services. I tried doing this through Jquery, but I did it with static names. I want these names to be fetched from database. please guide me how can I do this? aspx page-

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

Upvotes: 0

Views: 4434

Answers (2)

Omi
Omi

Reputation: 447

This is how it can be done-

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

and in cs code-

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()+"\"";
            }
        }
    }

Upvotes: 1

streak
streak

Reputation: 1151

If you want something to be read from database, there should be some server side script, hence you will need the webservice to do so.

Upvotes: 2

Related Questions