From 2c8eff9b530098fc9690b92dcab2fd46cdd1f91c Mon Sep 17 00:00:00 2001
From: Jonathan Vollebregt <jnvsor@gmail.com>
Date: Tue, 31 May 2016 21:02:16 +0200
Subject: [PATCH] Update AdminerTablesFilter

* Removes children request (Should work on IE6, 7, 8 now)
* Uses <strong> instead of <b>
* Doesn't leave said <strong> tags behind after updating the list
* Highlights multiple matches in a single table name
* Works case insensitively
* Improves performance with setTimeout
    With 400 tables, the old implementation locks up the tab (or
    browser if using something without multiprocess) for about
    half a second per keyup. Yes, this includes modifiers that
    don't actually change the filter. The new version handles
    the same event in 0.09 milliseconds.

    That's with all the above improvements.
    Tested in firefox 45.1.1 performance monitor.
---
 plugins/tables-filter.php | 59 ++++++++++++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/plugins/tables-filter.php b/plugins/tables-filter.php
index 809a4cbb..f625235f 100644
--- a/plugins/tables-filter.php
+++ b/plugins/tables-filter.php
@@ -7,28 +7,53 @@
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
 */
 class AdminerTablesFilter {
-	
-	function tablesPrint($tables) {
-		?>
+	function tablesPrint($tables) { ?>
+<p class="jsonly"><input id="filter-field" onkeyup="tablesFilterInput();">
+<p id='tables' onmouseover='menuOver(this, event);' onmouseout='menuOut(this);'>
+<?php
+foreach ($tables as $table => $type) {
+	echo '<span data-table-name="'.h($table).'"><a href="'.h(ME).'select='.urlencode($table).'"'.bold($_GET["select"] == $table).">".lang('select')."</a> ";
+	echo '<a href="'.h(ME).'table='.urlencode($table).'"'.bold($_GET["table"] == $table).">".h($table)."</a><br></span>\n";
+}
+?>
 <script type="text/javascript">
-function tablesFilter(value) {
-	var tables = document.getElementById('tables').getElementsByTagName('span');
-	for (var i = tables.length; i--; ) {
-		var a = tables[i].children[1];
-		var text = a.innerText || a.textContent;
-		tables[i].className = (text.indexOf(value) == -1 ? 'hidden' : '');
-		a.innerHTML = text.replace(value, '<b>' + value + '</b>');
+var tablesFilterTimeout = null;
+var tablesFilterValue = '';
+
+function tablesFilter(){
+	var value = document.getElementById('filter-field').value.toLowerCase();
+	if (value == tablesFilterValue) {
+		return;
 	}
+	tablesFilterValue = value;
+	if (value != '') {
+		var reg = (value + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
+		reg = new RegExp('('+ reg + ')', 'gi');
+	}
+	var tables = document.getElementById('tables').getElementsByTagName('span');
+	for (var i = 0; i < tables.length; i++) {
+		var a = tables[i].getElementsByTagName('a')[1];
+		var text = tables[i].getAttribute('data-table-name');
+		if (value == '') {
+			tables[i].className = '';
+			a.innerHTML = text;
+		} else {
+			tables[i].className = (text.toLowerCase().indexOf(value) == -1 ? 'hidden' : '');
+			a.innerHTML = text.replace(reg, '<strong>$1</strong>');
+		}
+	}
+}
+
+function tablesFilterInput() {
+	window.clearTimeout(tablesFilterTimeout);
+	tablesFilterTimeout = window.setTimeout(tablesFilter, 200);
+}
+
+if (document.getElementById('filter-field').value){
+    tablesFilter();
 }
 </script>
-<p class="jsonly"><input onkeyup="tablesFilter(this.value);">
 <?php
-		echo "<p id='tables' onmouseover='menuOver(this, event);' onmouseout='menuOut(this);'>\n";
-		foreach ($tables as $table => $type) {
-			echo '<span><a href="' . h(ME) . 'select=' . urlencode($table) . '"' . bold($_GET["select"] == $table) . ">" . lang('select') . "</a> ";
-			echo '<a href="' . h(ME) . 'table=' . urlencode($table) . '"' . bold($_GET["table"] == $table) . ">" . h($table) . "</a><br></span>\n";
-		}
 		return true;
 	}
-	
 }