From 18422a45d036fc666655b7a19344a6b6f3a0b1df Mon Sep 17 00:00:00 2001
From: coderkun <coderkun@localhost>
Date: Sat, 3 May 2014 13:50:26 +0200
Subject: [PATCH] improve filtering for adding Characters to Character groups
 (Issue #200)

---
 views/html/charactergroups/managegroup.tpl | 42 +++++++++++++++-------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/views/html/charactergroups/managegroup.tpl b/views/html/charactergroups/managegroup.tpl
index 6b102806..37432cc9 100644
--- a/views/html/charactergroups/managegroup.tpl
+++ b/views/html/charactergroups/managegroup.tpl
@@ -46,7 +46,7 @@
 		</fieldset>
 		<fieldset class="filter add">
 			<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">
 				<?php foreach($characters as &$character) : ?>
 				<option value="<?=$character['id']?>"><?=$character['name']?></option>
@@ -79,17 +79,35 @@
 	/**
 	 * Hide select elements that include the value string from the given input
 	 * element.
+	 * 
+	 * @author Lessan Vaezi (http://stackoverflow.com/a/6647367)
 	 */
-	function filter_characters(input)
-	{
-		text = input.value.toLowerCase();
-		$('#characters option').each(function() {
-			if(this.text.toLowerCase().indexOf(text) !== -1) {
-				jQuery(this).removeAttr('hidden');
-			}
-			else {
-				jQuery(this).attr('hidden', "hidden");
-			}
+	jQuery.fn.filterByText = function(textbox) {
+		return this.each(function() {
+			var select = this;
+			var options = [];
+			$(select).find('option').each(function() {
+				options.push({value: $(this).val(), text: $(this).text()});
+			});
+			$(select).data('options', options);
+			
+			$(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>