How to use jquery function with asp.net textbox

Question

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>

How are you setting the id of the ASP:TextBox? You need to use ClientID, not id. — Crowcoder
– Crowcoder, Commented Sep 25, 2014 at 22:34

Mark Fitzpatrick · Accepted Answer · 2014-09-27 17:11:26Z

2

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({......

edited Sep 27, 2014 at 17:11

answered Sep 25, 2014 at 22:38

Mark Fitzpatrick

1,6341 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saturn K Over a year ago

It should be $("#" + <%= tags.ClientID %>") instead... you have to add the extra "#" when selecting by ID

Mark Fitzpatrick Over a year ago

Good catch Keyvan. Updated my response.

Justin Tartagni Over a year ago

thank you for your help sirs. sorry I took so long to accept this

Dennis R · Accepted Answer · 2014-09-25 23:57:06Z

0

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

answered Sep 25, 2014 at 23:57

Dennis R

3,2471 gold badge21 silver badges24 bronze badges

1 Comment

Saturn K Over a year ago

Class is best suited for a class of elements instead of one single element. It's best to use the ClientID for this purpose.

Collectives™ on Stack Overflow

How to use jquery function with asp.net textbox

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related