Combobox

HTML

<br>
<select id="select1">
    <option>Selecione</option>
</select>
    <br><br><br>
        <label></label>

CSS

ul{
    border : solid 10px;
    padding : 10px;
}

JavaScript

$.widget("custom.dropdown", {
    options : {
        data : undefined
    },
    _create : function(){
        this.element.css(
            {"border-radius" : "3px",
             "min-width" : "200px"}); 
        this._load();
    },
    _load : function(){
        var listName = Object.keys(
            this.options.data)[0];
        var list = this.options.data[listName];
        var props = Object.keys(list[0]);
       for(var i in list)   
           this.element.append(
           "<option value='" + list[i][props[0]]
               + "'>" + list[i][props[1]] +
               "</option>"
           );
    }        
});

$.widget("custom.combo", {
    options : {},
    _create : function(){
        this.input = 
            input = $("<input id='i1548'></input>");
        this.list = list = $("<ul style='list-style : none;position:absolute;'></ul>");
        var iconDown = $("<span class='ui-icon ui-icon-triangle-1-s'></span>")
        .css({position : "absolute"});
         input.insertAfter(this.element)
        .css("width" ,
             this.element.css("width"))
         .change(function(){
             if(self.input.is(':focus')){
                self._filter(self.input.text());                 
             }
         });
        iconDown.insertAfter(this.element)
        .position({my : "left top", at :
                   "right-18px top+2px" ,
                   of : this.element})
        .button().click(
            function(){
                self.toggleList();
            }
        );
        list.insertAfter(this.element)
        .position({my : "left top-20px", 
                   at : "left bottom" , 
                   of : $(input)})
        .css({"width" : input.css("width"),
              "display" : "none"});
       
        var self = this;
        this.element
        .hide();
        input.focus(function(){
          self.toggleList();
        }).focusout(function(){
            self.toggleList();
        });
        this._load();
 ...