Sample create function in widget

create.js

_create: function() {

    // this.element -- a jQuery object of the element the widget was invoked on.
    // this.options --  the merged options hash

    // Cache references to collections the widget needs to access regularly
    this.filterElems = this.element.children()
        .addClass( "ui-widget-content " + this.options.className );

    this.filterInput = $( "<input type='text'>" )
        .insertBefore( this.element )
        .wrap( "<div class='ui-widget-header " + this.options.className + "'>" );

    // bind events on elements: 
    this._on( this.filterElems, {
        mouseenter: "_hover",
        mouseleave: "_hover"
    });

    // toggles ui-state-focus for you:
    this._focusable( this.filterInput );

    // _hoverable works for ui-state-hover, but we will do something slighty different in our hover
    this._on( this.filterInput, {
        "keyup": "filter"
    });

    this.timeout = false;

},

filterable.html

<!-- the result of this widget is -->

  <div class="ui-widget-header myClass">
    <input class="" type="text"/>
  </div>
  <div id="myFilterable"></div>