Select find lookup
Component jquery to find elements of a select tag when this have many elements
HTML
<select name="combo" id="combo">
<option value="1">registro 1</option>
<option value="2">registro 2</option>
<option value="3">registro 3</option>
<option value="4">registro 4</option>
<option value="5">registro 5</option>
<option value="6">registro 6</option>
<option value="7">Outro 7</option>
<option value="8">Carro 8</option>
<option value="9">Casa 9</option>
</select>
JavaScript
$.widget("custom.selectFindDialog", {
options : {title : 'Localizar',
animate : 'fade',
showOnFocus : true},
_create : function(){
var self = this;
self.canShowOnFocus = true;
var table = "<div style='display:none' " +
' id="popupLookup">' +
'<input type="text" style="width:100%;" />' +
'<div>'+
' <table> ' +
' <tbody>'+
' ' +
' </tbody>'+
' </table></div> '+
' </div>"';
self.dialog = $(table).appendTo($('body'));
self.dialog.find('input').keypress(function(event){
var key = event.which;
switch(key){
case 13 : self._selectRow();
break;
default :
self._find(this.value + String.fromCharCode(event.which));
}
});
if(self.options.showOnFocus)
self.element.focus(function(){
if(!self.canShowOnFocus){
$(this).next().focus();//change the focus for the next element
return;
}
self.canShowOnFocus = false;
self._show();
}).focusout(function(){
});
var button = $("<div></div>").button(
{ icons : { primary : 'ui-icon-search'}
})
.css({'height' :
self.element.css('height') + 'px',
width : '25px'})
.click(function(){ self._show();})
.insertAfter(this.element);
self.button = button;
self._loadData();
self._setupTable();
},
_find : function(text){
var self = this;
var rows = self.dialog.find('tr:contains(' + text + ')');
self.dialog.find('tr').hide();
rows.show();
},
_setupTable : function(){
var self = this;
self.dialog.find('table').css({'width'...