improve filtering for adding Characters to Character groups (Issue #200)

This commit is contained in:
coderkun 2014-05-03 13:50:26 +02:00
commit 18422a45d0

View file

@ -46,7 +46,7 @@
</fieldset> </fieldset>
<fieldset class="filter add"> <fieldset class="filter add">
<p class="fwb"><small>Charaktere der Gruppe hinzufügen:</small></p> <p class="fwb"><small>Charaktere der Gruppe hinzufügen:</small></p>
<input type="text" placeholder="<?=_('Filter Characters')?>" onkeyup="filter_characters(this)" /> <input type="text" id="filter_input" placeholder="<?=_('Filter Characters')?>" />
<select id="characters" name="characters[]" size="10" multiple="multiple"> <select id="characters" name="characters[]" size="10" multiple="multiple">
<?php foreach($characters as &$character) : ?> <?php foreach($characters as &$character) : ?>
<option value="<?=$character['id']?>"><?=$character['name']?></option> <option value="<?=$character['id']?>"><?=$character['name']?></option>
@ -79,17 +79,35 @@
/** /**
* Hide select elements that include the value string from the given input * Hide select elements that include the value string from the given input
* element. * element.
*
* @author Lessan Vaezi (http://stackoverflow.com/a/6647367)
*/ */
function filter_characters(input) jQuery.fn.filterByText = function(textbox) {
{ return this.each(function() {
text = input.value.toLowerCase(); var select = this;
$('#characters option').each(function() { var options = [];
if(this.text.toLowerCase().indexOf(text) !== -1) { $(select).find('option').each(function() {
jQuery(this).removeAttr('hidden'); options.push({value: $(this).val(), text: $(this).text()});
} });
else { $(select).data('options', options);
jQuery(this).attr('hidden', "hidden");
} $(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
}); });
} };
$(function() {
$('#characters').filterByText($('#filter_input'));
});
</script> </script>