CODEWITHSUNDEEP
jqueryasp.netvb.net
Justin Tartagni
Justin Tartagni

Reputation: 85

How to use jquery function with asp.net textbox

This jquery function works great for me as a dropdown list that fills the input box upon selection.

my problem is that I want to use an ASP.net textbox rather than the input box.(mainly to refer to it when I click the "submit" button) when I exchange the two my dropdown function no longer works.

Thanks for the help

<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Scrollable results</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete {
    max-height: 400px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }

  /* IE 6 doesn't support max-height

   * we use height instead, but this forces the menu to always be this tall

   */

  * html .ui-autocomplete {
    height: 400px;
  }
  </style>
  <script>
      $(function () {
          var availableTags = [

"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
    ];
          $("#tags").autocomplete({
              source: availableTags
          });
      });
  </script>
</head>
<body>

<div class="ui-widget">

  <label for="tags">Select a procedure: </label>

    <input id="tags" type="text" />
    <asp:Button ID="Button1" runat="server" Text="Submit" />

</div>
</body>
</html>

Upvotes: 0

Views: 1761

Answers (2)

Mark Fitzpatrick
Mark Fitzpatrick

Reputation: 1624

Either use:

<asp:TextBox id="tags" ClientIDMode="static" runat="server" />

Which will generate the clientID to be the same as the id you have set, or

<asp:TextBox id="tags" runat="server" />

and use the jquery selector like

$("#<%= tags.ClientID %>").autocomplete({......

Upvotes: 2

Dennis R
Dennis R

Reputation: 3237

If id is the problem then try assigning a dummy class for the textbox and reference the control using the class name. Upon Submit button click you will be able to access the tags textbox server control. 

<asp:TextBox id="tags" runat="server" class ="txtauto" />

Then in your JS

$(".txtauto").autocomplete({
       source: availableTags
});

Upvotes: 0

Related Questions