2012-02-10 19:40:40 +04:00
|
|
|
/**
|
|
|
|
* Inspired by http://jqueryui.com/demos/autocomplete/#combobox
|
|
|
|
*/
|
|
|
|
|
|
|
|
(function( $ ) {
|
|
|
|
$.widget('ui.combobox', {
|
2012-04-29 22:28:50 +04:00
|
|
|
options: {
|
|
|
|
id: null,
|
|
|
|
name: null,
|
|
|
|
showButton: false,
|
|
|
|
editable: true
|
|
|
|
},
|
2012-02-10 19:40:40 +04:00
|
|
|
_create: function() {
|
|
|
|
var self = this,
|
|
|
|
select = this.element.hide(),
|
|
|
|
selected = select.children(':selected'),
|
|
|
|
value = selected.val() ? selected.text() : '';
|
|
|
|
var input = this.input = $('<input type="text">')
|
|
|
|
.insertAfter( select )
|
|
|
|
.val( value )
|
|
|
|
.autocomplete({
|
|
|
|
delay: 0,
|
|
|
|
minLength: 0,
|
|
|
|
source: function( request, response ) {
|
|
|
|
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
|
2012-05-12 15:42:41 +04:00
|
|
|
response( select.children('option').map(function() {
|
2012-02-10 19:40:40 +04:00
|
|
|
var text = $( this ).text();
|
|
|
|
if ( this.value && ( !request.term || matcher.test(text) ) )
|
|
|
|
return {
|
|
|
|
label: text.replace(
|
|
|
|
new RegExp(
|
2012-05-12 15:42:41 +04:00
|
|
|
'(?![^&;]+;)(?!<[^<>]*)(' +
|
2012-02-10 19:40:40 +04:00
|
|
|
$.ui.autocomplete.escapeRegex(request.term) +
|
2012-05-12 15:42:41 +04:00
|
|
|
')(?![^<>]*>)(?![^&;]+;)', 'gi'
|
|
|
|
), '<strong>$1</strong>'),
|
2012-02-10 19:40:40 +04:00
|
|
|
value: text,
|
|
|
|
option: this
|
|
|
|
};
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
select: function( event, ui ) {
|
|
|
|
self.input.val($(ui.item.option).text());
|
|
|
|
self.input.trigger('change');
|
|
|
|
ui.item.option.selected = true;
|
2012-05-12 15:42:41 +04:00
|
|
|
self._trigger('selected', event, {
|
2012-02-10 19:40:40 +04:00
|
|
|
item: ui.item.option
|
|
|
|
});
|
|
|
|
},
|
|
|
|
change: function( event, ui ) {
|
|
|
|
if ( !ui.item ) {
|
2012-05-12 15:42:41 +04:00
|
|
|
var matcher = new RegExp( '^' + $.ui.autocomplete.escapeRegex( $(this).val() ) + '$', 'i' ),
|
2012-02-10 19:40:40 +04:00
|
|
|
valid = false;
|
|
|
|
self.input.val($(this).val());
|
|
|
|
//self.input.trigger('change');
|
2012-05-12 15:42:41 +04:00
|
|
|
select.children('option').each(function() {
|
2012-02-10 19:40:40 +04:00
|
|
|
if ( $( this ).text().match( matcher ) ) {
|
|
|
|
this.selected = valid = true;
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
2012-04-27 06:01:34 +04:00
|
|
|
if ( !self.options['editable'] && !valid ) {
|
2012-02-10 19:40:40 +04:00
|
|
|
// remove invalid value, as it didn't match anything
|
|
|
|
$( this ).val( "" );
|
|
|
|
select.val( "" );
|
2012-05-12 15:42:41 +04:00
|
|
|
input.data('autocomplete').term = '';
|
2012-02-10 19:40:40 +04:00
|
|
|
return false;
|
2012-04-27 06:01:34 +04:00
|
|
|
}
|
2012-02-10 19:40:40 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
2012-05-12 15:42:41 +04:00
|
|
|
.addClass('ui-widget ui-widget-content ui-corner-left');
|
2012-02-10 19:40:40 +04:00
|
|
|
|
2012-05-12 15:42:41 +04:00
|
|
|
input.data('autocomplete')._renderItem = function( ul, item ) {
|
|
|
|
return $('<li></li>')
|
|
|
|
.data('item.autocomplete', item )
|
|
|
|
.append('<a>' + item.label + '</a>')
|
2012-02-10 19:40:40 +04:00
|
|
|
.appendTo( ul );
|
|
|
|
};
|
|
|
|
$.each(this.options, function(key, value) {
|
|
|
|
self._setOption(key, value);
|
|
|
|
});
|
2012-04-29 22:28:50 +04:00
|
|
|
|
2012-05-12 15:42:41 +04:00
|
|
|
input.dblclick(function() {
|
|
|
|
// pass empty string as value to search for, displaying all results
|
|
|
|
input.autocomplete('search', '');
|
|
|
|
});
|
|
|
|
|
2012-04-29 22:28:50 +04:00
|
|
|
if(this.options['showButton']) {
|
2012-05-12 15:42:41 +04:00
|
|
|
this.button = $('<button type="button"> </button>')
|
|
|
|
.attr('tabIndex', -1 )
|
|
|
|
.attr('title', 'Show All Items')
|
2012-04-29 22:28:50 +04:00
|
|
|
.insertAfter( input )
|
|
|
|
.addClass('svg')
|
|
|
|
.addClass('action')
|
|
|
|
.addClass('combo-button')
|
|
|
|
.click(function() {
|
|
|
|
// close if already visible
|
2012-05-12 15:42:41 +04:00
|
|
|
if ( input.autocomplete('widget').is(':visible') ) {
|
|
|
|
input.autocomplete('close');
|
2012-04-29 22:28:50 +04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// work around a bug (likely same cause as #5265)
|
|
|
|
$( this ).blur();
|
|
|
|
|
|
|
|
// pass empty string as value to search for, displaying all results
|
2012-05-12 15:42:41 +04:00
|
|
|
input.autocomplete('search', '');
|
2012-04-29 22:28:50 +04:00
|
|
|
input.focus();
|
|
|
|
});
|
|
|
|
}
|
2012-02-10 19:40:40 +04:00
|
|
|
},
|
|
|
|
destroy: function() {
|
|
|
|
this.input.remove();
|
2012-04-27 06:01:34 +04:00
|
|
|
//this.button.remove();
|
2012-02-10 19:40:40 +04:00
|
|
|
this.element.show();
|
|
|
|
$.Widget.prototype.destroy.call( this );
|
|
|
|
},
|
|
|
|
value: function(val) {
|
|
|
|
if(val != undefined) {
|
|
|
|
this.input.val(val);
|
|
|
|
} else {
|
|
|
|
return this.input.val();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
_setOption: function( key, value ) {
|
|
|
|
switch( key ) {
|
2012-04-27 06:01:34 +04:00
|
|
|
case 'id':
|
2012-02-10 19:40:40 +04:00
|
|
|
this.options['id'] = value;
|
|
|
|
this.input.attr('id', value);
|
2012-04-03 05:28:12 +04:00
|
|
|
break;
|
2012-04-27 06:01:34 +04:00
|
|
|
case 'name':
|
2012-02-10 19:40:40 +04:00
|
|
|
this.options['name'] = value;
|
|
|
|
this.input.attr('name', value);
|
2012-04-03 05:28:12 +04:00
|
|
|
break;
|
2012-04-27 06:01:34 +04:00
|
|
|
case 'attributes':
|
2012-04-03 05:28:12 +04:00
|
|
|
var input = this.input;
|
|
|
|
$.each(this.options['attributes'], function(key, value) {
|
|
|
|
input.attr(key, value);
|
|
|
|
});
|
|
|
|
break;
|
2012-04-27 06:01:34 +04:00
|
|
|
case 'classes':
|
2012-02-10 19:40:40 +04:00
|
|
|
var input = this.input;
|
|
|
|
$.each(this.options['classes'], function(key, value) {
|
|
|
|
input.addClass(value);
|
|
|
|
});
|
2012-04-03 05:28:12 +04:00
|
|
|
break;
|
2012-04-27 06:01:34 +04:00
|
|
|
case 'editable':
|
2012-04-29 22:28:50 +04:00
|
|
|
case 'showButton':
|
|
|
|
this.options[key] = value;
|
2012-04-27 06:01:34 +04:00
|
|
|
break;
|
2012-02-10 19:40:40 +04:00
|
|
|
}
|
|
|
|
// In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
|
|
|
|
$.Widget.prototype._setOption.apply( this, arguments );
|
|
|
|
// In jQuery UI 1.9 and above, you use the _super method instead
|
|
|
|
//this._super( "_setOption", key, value );
|
2012-04-29 22:28:50 +04:00
|
|
|
}
|
2012-02-10 19:40:40 +04:00
|
|
|
});
|
|
|
|
})( jQuery );
|