title: Set focus on Jquery auto complete drop down list from code behind c#
body: <p>I am using <a href="http://jqueryui.com/autocomplete/#combobox" rel="nofollow">Jquery auto complete combo</a> box for my drop down list. my issue here is once I set on focus from code behind it doesnt reflect in the client side.</p>
  
  <pre><code>&lt;asp:DropDownList runat="server" CssClass="Dropdown" ID="ddl"&gt;&lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p>I set on focus using, </p>
  
  <pre><code>ddl.Focus();
  </code></pre>
  
  <p>My Jquery is here, </p>
  
  <pre><code>    (function( $ ) {
      $.widget( "custom.combobox", {
        _create: function() {
          this.wrapper = $( "&lt;span&gt;" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );
  
          this.element.hide();
          this._createAutocomplete();
          this._createShowAllButton();
        },
  
        _createAutocomplete: function() {
          var selected = this.element.children( ":selected" ),
            value = selected.val() ? selected.text() : "";
  
          this.input = $( "&lt;input&gt;" )
            .appendTo( this.wrapper )
            .val( value )
            .attr( "title", "" )
            .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
            .autocomplete({
              delay: 0,
              minLength: 0,
              source: $.proxy( this, "_source" )
            })
            .tooltip({
              tooltipClass: "ui-state-highlight"
            });
  
          this._on( this.input, {
            autocompleteselect: function( event, ui ) {
              ui.item.option.selected = true;
              this._trigger( "select", event, {
                item: ui.item.option
              });
            },
  
            autocompletechange: "_removeIfInvalid"
          });
        },
  
        _createShowAllButton: function() {
          var input = this.input,
            wasOpen = false;
  
          $( "&lt;a&gt;" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .tooltip()
            .appendTo( this.wrapper )
            .button({
              icons: {
                primary: "ui-icon-triangle-1-s"
              },
              text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "custom-combobox-toggle ui-corner-right" )
            .mousedown(function() {
              wasOpen = input.autocomplete( "widget" ).is( ":visible" );
            })
            .click(function() {
              input.focus();
  
              // Close if already visible
              if ( wasOpen ) {
                return;
              }
  
              // Pass empty string as value to search for, displaying all results
              input.autocomplete( "search", "" );
            });
        },
  
        _source: function( request, response ) {
          var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
          response( this.element.children( "option" ).map(function() {
            var text = $( this ).text();
            if ( this.value &amp;&amp; ( !request.term || matcher.test(text) ) )
              return {
                label: text,
                value: text,
                option: this
              };
          }) );
        },
  
        _removeIfInvalid: function( event, ui ) {
  
          // Selected an item, nothing to do
          if ( ui.item ) {
            return;
          }
  
          // Search for a match (case-insensitive)
          var value = this.input.val(),
            valueLowerCase = value.toLowerCase(),
            valid = false;
          this.element.children( "option" ).each(function() {
            if ( $( this ).text().toLowerCase() === valueLowerCase ) {
              this.selected = valid = true;
              return false;
            }
          });
  
          // Found a match, nothing to do
          if ( valid ) {
            return;
          }
  
          // Remove invalid value
          this.input
            .val( "" )
            .attr( "title", value + " didn't match any item" )
            .tooltip( "open" );
          this.element.val( "" );
          this._delay(function() {
            this.input.tooltip( "close" ).attr( "title", "" );
          }, 2500 );
          this.input.data( "ui-autocomplete" ).term = "";
        },
  
        _destroy: function() {
          this.wrapper.remove();
          this.element.show();
        }
      });
    })( jQuery );
  </code></pre>
  
  <p>I understand that Jquery creates its own input and a anger tag for the asp.net drop down. So the actual asp.net drop down will have no control with its ID.</p>