Add the event handler when the input is created, like so ( and don't use live() ):

    this.input = $("<input>")

              .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"
              }).on('mouseup', function() {
                  $(this).select();
              });

[**FIDDLE**](http://jsfiddle.net/KyleMit/Fjj3J/1/)

And yes, you have to use `mouseup` to get the selection working.

I'm using the `jQuery UI` `AutoComplete` `Combobox` option as illustrated [here](http://jqueryui.com/autocomplete/#combobox).  This will start filtering the shown results immediately when you begin typing, but if an element is already selected, then typing (without manually removing the contents) will just append onto the string and typically not find anything.  

I'd like the text to be selected by default whenever the input field receives focus, but am having trouble figuring out where to add that logic into the script.

Here's a [jsFiddle](http://jsfiddle.net/KyleMit/Fjj3J/) with this example on it.

Normally, to select the text in an input element when it recieves focus, you could execute the following, like in [this](https://stackoverflow.com/questions/6124394/select-all-text-on-focus-using-jquery/6124595#6124595) SO question:


    
    //Select all text in Cost Rate Text Boxes when they have focus
    $(document).ready(function () {
        $(".CostRateTextBox").live('mouseup', function () {
            $(this).select();
        });
    });
    
The `_createAutocomplete` function in the script is where the input box is created.  Is it possible to do this near the following line?



    this.input = $("<input>")

Select Text on Focus of Input Element Generated by jQuery UI

There are a couple things that are helpful for answering this question.  One is to take a look at [JQuery-UI's own documentation](http://api.jqueryui.com/autocomplete/#event-select) on this function:



    // Initialize the autocomplete with the select callback specified:
    $( ".selector" ).autocomplete({  select: function( event, ui ) {}}); 
    // Bind an event listener to the autocompleteselect event:
    $( ".selector" ).on( "autocompleteselect", function( event, ui ) {} ); 


Essentially, what needs to happen, is something needs to signal a callback when the item has been selected (either from the menu or by typing and getting an exact match).

We can do this by modifying the default functionality demonstrated on the [autocomplete](http://jqueryui.com/autocomplete/#combobox) page:



    this._on( this.input, {
      autocompleteselect: function( event, ui ) {
        ui.item.option.selected = true;
        this._trigger( "select", event, {
          item: ui.item.option
        });
      },
      autocompletechange: "_removeIfInvalid"
    });

This code attaches listeneres on the `select` and `change` events and runs the inline defined function and the _removeIfInvalid function whenever those events fire (respectively)

By implementing the following changes we can do a postback when a valid selection has been made:



    //attach listeners
    this._on(this.input, {
      autocompleteselect: "_selectFromMenu",
      autocompletechange: "_removeIfInvalid"
    });
    

**Will get called anytime an item is selected from the menu:**


    
    _selectFromMenu: function (event, ui) {
      ui.item.option.selected = true;
      this._trigger("select", event, {
          item: ui.item.option
        });
      __doPostBack('', '');
    },

**Will get called any time the text changes:**



    _removeIfInvalid: function (event, ui) {

      // Selected an item, automatically valid, post back
      if (ui.item) {
        __doPostBack('', '');
        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, post back
      if (valid) {
        __doPostBack('', '');
        return;
      }

      // Remove invalid value...

Here's a [jsfiddle](http://jsfiddle.net/KyleMit/Fjj3J/1/) with the complete code changes, although `__doPostBack` is commented out because it is not being handled by anything

A couple further note:

* I'm calling __doPostBack, but I'm relying on that method being available because of asp.net event handling generated code.
* In order to initialize the combo box, you have to call `$("#combobox").combobox();`.  Make sure that whatever is preforming that operation is still getting called on the return from the post back, otherwise the functionality will not come back.  This is one thing to work past if you're using the code asynchronously in an update panel.

I'd like to post back to the server when my combobox changes value (ideally with an AJAX call in an update panel - but one thing at a time).  I'm using the I'm using the `jQuery UI` [`AutoComplete Combobox`](http://jqueryui.com/autocomplete/#combobox) and, unfortunately, it's interferring with the change event as I'm not changing the drop down list directly.

I'm using the implementation detailed [here](http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood).

Here are some choice snippets 

**HTML Body Code**



    <span class="ui-widget">
        <asp:DropDownList ID="cboLang" runat="server" AutoPostBack="True">
            <asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
            <asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
            <asp:ListItem Value="Asp">Asp</asp:ListItem>
        </asp:DropDownList>
    </span>

**Autocomplete Javascript**

This is the autocomplete js that exexutes whenever a selection has been made.  It will always run the function `_removeIfInvalid`



	this._on(this.input, {
		autocompleteselect: function (event, ui) {
			ui.item.option.selected = true;
			this._trigger("select", event, {
				item: ui.item.option
			});
		},

		autocompletechange: "_removeIfInvalid"
	});

**Server Side Code**



    Protected Sub cboLang_SelectedIndexChanged(sender As Object, e As EventArgs) _
            Handles cboLang.SelectedIndexChanged
        'DO OTHER STUFF HERE
        Dim alert = String.Format("alert('{0}');", "Hi")
        ScriptManager.RegisterStartupScript(Me, Me.GetType, "DropDownChange", alert, True)
    End Sub

**Generated Code**

When an ASP.NET renders the page with the attached event, it produces the following code



    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['ctl00'];
    if (!theForm) {
        theForm = document.ctl00;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
        }
    }
    //]]>
    </script>

    <select id="cboLang" onchange="javascript:setTimeout('__doPostBack(\'cboLang\',\'\')', 0)"
        name="cboLang" style="display: none;">

**Question**

Where can I go about making changes to ensure that with each update to the autcomplete input, I can trigger a server event?

Fire DropDownList SelectedIndexChanged event when using JQuery-UI Autocomplete

### Here's a different approach

You could treat each group of `childCategories` as it's own datasource.  Then use the [Multiple Datasets][Multiple Datasets] paradigm to automatically apply a header for child items.

The second parameter to [<code>$.typeahead(options, <i>[*datasets]</i>)</code>][typeahead()] takes an array of datasets. We can convert each set of child elements into it's own dataset like this:



    var dataSources = [];
    $.each(movies, function(index, movieItem) {
        if (movieItem.childCategories) {
            var bloodhoundEngine = createBlounhoud(movieItem.childCategories, 'value');
            var dataSource = {
                name: movieItem.value,
                displayKey: 'value',
                source: bloodhoundEngine.ttAdapter(),
                templates: {
                    header: '<h3 class="typeahead-group">' + movieItem.value + '</h3>'
                }
            };
            dataSources.push(dataSource);
        }
    });

Notice that we've defined a *header template* for items in this datasource. We can style it like this:



    .typeahead-group {
      margin: 0 20px 5px 10px;
      padding: 3px 0;
      border-bottom: 1px solid #ccc;
    }

Elements that were not part of a child group could could all get added as part of a single `ungrouped` datasource:



    var ungrouped = [];
    $.each(movies, function(index, movieItem) {
        if (!movieItem.childCategories) {
            ungrouped.push(movieItem);
        }
    });
    
    function addUngroupedItems() {
        var bloodhoundEngine = createBlounhoud(ungrouped, 'value');
        var dataSource = {
            name: 'ungrouped',
            displayKey: 'value',
            source: bloodhoundEngine.ttAdapter()
        };
        // add to first position of array so it doesn't look like it's part of the group above it
        dataSources.unshift(dataSource);
    };

This solution has the benefit of minimally overriding existing typeahead and bloodhound code while working within the framework to provide grouping functionality.

Also, it provides an intuitive UI for users that might know the name of the name of a child item they're looking for, but don't want to have to click through each category to find it.  Most local searches can trivially search on all fields.


### [Working Demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle-show]



> **Aside**: I would try to avoid modifying the source code  directly.  It makes it very difficult to see where you have made your own modifications.  Instead, try using a CDN for the whole library and writing a plugin or wrapper on top of it.  This will make incoporating future revisions much easier.

[Multiple Datasets]: http://twitter.github.io/typeahead.js/examples/#multiple-datasets

[typeahead()]: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadoptions-datasets

[fiddle]: http://jsfiddle.net/KyleMit/xk3pscgx/
[fiddle-show]: http://jsfiddle.net/KyleMit/xk3pscgx/show

[screenshot]: http://i.imgur.com/mA9DUn7.png

I am using `twitter typeahead` to show category suggestions which works fine for me. 
 The problem is with the display of sub-categories. If a `category has sub-categories`
 `then expand/collapse icon` is shown along with the suggestion, if the user selects one them the sub-categories has to be shown below it, i have succeeded in the display part but `cannot update the dataset` of typeahead so that when the user selects one the sub-categories it should be displayed in the input. `Please use keyboard on Jsfiddle because i have tried only in keypress`. The following is my json array 


JSFIDDLE [here][1]

    [{
        "id": "38",
        "value": "Entertaintment",
        "parent_id": "27",
        "children": "1",
        "childCategories": [{
            "id": "28",
            "value": "Movies",
            "parent_id": "38"
        }, {
            "id": "29",
            "value": "Sports",
            "parent_id": "38"
        }]
    }, {
        "id": "40",
        "value": "eeen",
        "parent_id": "27",
        "children": "1",
        "childCategories": [{
            "id": "41",
            "value": "een child 1",
            "parent_id": "40"
        }]
    }, {
        "id": "41",
        "value": "een child 1",
        "parent_id": "40",
        "children": "0",
        "childCategories": false
    }]

I have tried the following:

    _onEnterKeyed: function onEnterKeyed(type, $e) {
        var cursorDatum, topSuggestionDatum;
        cursorDatum = this.dropdown.getDatumForCursor();
        topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
        //My custom condition, if category has children show sub-categories below 
        if (cursorDatum.raw && cursorDatum.raw.children == "1") {
            //below line is my failed try  
	        //this.dropdown.updateChild('',cursorDatum.raw.childCategories,false); 
            var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
            var childHTML='';
            $('.ttchild').remove();
            //adding the sub-categories to dropdown
            $.each(cursorDatum.raw.childCategories,function(i,v){
                childHTML += '<div class="tt-suggestion ttchild"><div class="suggestions"><span>'+this.value+'</span></div></div>';
            });
            $(childHTML).insertAfter('.tt-cursor');
            return;
        }

        if (cursorDatum) {
            this._select(cursorDatum);
            $e.preventDefault();
        } 
        else if (this.autoselect && topSuggestionDatum) {
            this._select(topSuggestionDatum);
            $e.preventDefault();
        }
    },

    //This is my custom function trying to update the dataset, but i know its totally wrong.
    updateChild: function updateChild(query,childs) {
        var that = this;
        this.query = query;
        this.canceled = false;
        this.source(query, render);
    		
        function render(childs) {
            if (!that.canceled && query === that.query) {
                that._render(query, childs);
            }
        }
    },


JSFIDDLE [here][2]

e.g: The Entertainment category has subcategories movies and sports.

Hope any one would help me....


  [1]: http://jsfiddle.net/e0zqL2qd/2/
  [2]: http://jsfiddle.net/e0zqL2qd/2/