How to use jquery function with textbox

0 votes
asked Sep 25, 2014 by justin-tartagni

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

  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Scrollable results</title>
  <link rel="stylesheet" href="//">
  <script src="//"></script>
  <script src="//"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  .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;
      $(function () {
          var availableTags = [

              source: availableTags

<div class="ui-widget">

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

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


2 Answers

+2 votes
answered Sep 25, 2014 by mark-fitzpatrick

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({......
0 votes
answered Sep 25, 2014 by dennis-r

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

       source: availableTags
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter