Fuzzy matching

fishythefish · Feb 23, 2014 · 4369dad · 4369dad
1 parent d760a04
commit 4369dad
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 0 deletions.
diff --git a/options.css → css/options.css b/options.css → css/options.css
diff --git a/css/popup.css b/css/popup.css
@@ -0,0 +1,32 @@
+body {
+	width: 768px;
+	background-color: #333;
+	overflow-x: hidden;
+	-ms-overflow-x: hidden;
+}
+
+#searchbar {
+	border-style: none;
+	padding: 5px;
+	width: 758px;
+	font-size: 20px;
+	background-color: inherit;
+	color: #3CF;
+}
+
+#searchresults {
+	width: inherit;
+	font-size: 20px;
+}
+
+.result {
+	font-family: "Helvetica", sans-serif;
+	border-width: 1px;
+	border-style: none none dotted none;
+	border-color: #3CF;
+	color: #CCC;
+}
+
+.match {
+	color: #3CF;
+}
diff --git a/html/options.html b/html/options.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="/css/options.css">
+		<script type="text/javascript" src="/js/options.js"></script>
+	</head>
+	<body>
+		<h1>Options</h1>
+	</body>
+</html>
diff --git a/html/popup.html b/html/popup.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="/css/popup.css">
+		<script src="/js/jquery-1.11.0.min.js"></script>
+		<script src="/js/popup.js"></script>
+	</head>
+	<body>
+		<input id="searchbar"
+			type="text"
+			autocomplete="on"
+			autofocus
+			name="search"
+			placeholder="What can I get you?">
+		<div id="searchresults">
+		</div>
+	</body>
+</html>
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,7 @@
+chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
+{
+	switch(request.type)
+	{
+
+	}
+});
diff --git a/js/jquery-1.11.0.min.js b/js/jquery-1.11.0.min.js
diff --git a/options.js → js/options.js b/options.js → js/options.js
diff --git a/js/popup.js b/js/popup.js
@@ -0,0 +1,80 @@
+$(document).ready(function()
+{
+	var $searchbar = $("#searchbar");
+	var $searchresults = $("#searchresults");
+
+	var results = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta', 'eta',
+		'theta', 'iota', 'kappa', 'lambda', 'mu', 'nu', 'xi', 'omicron', 'pi',
+		'rho', 'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'];
+
+	updateresults(results, "");
+
+	$searchbar.on("input", function()
+	{
+		var text = $searchbar.val();
+
+		/*function validate(value, index, array)
+		{
+			var pattern = /[\w ():-]/gi;
+			var check = pattern.test(value);
+			return check;
+		}
+
+		var text = $searchbar.val();
+		var filtered = [].filter.call(text, validate).join("");
+		$searchbar.val(filtered);*/
+		updateresults(results, text.split(""));
+	});
+
+	function updateresults(results, chars)
+	{
+		$searchresults.empty();
+
+		if (chars.length === 0)
+		{
+			addresults(results);
+		}
+		else
+		{
+			var patternstring = "";
+			for (var i in chars)
+			{
+				var c = chars[i].replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+				patternstring += "([^" + c + "]*)(" + c + ")";
+			}
+			patternstring += "(.*)";
+			var pattern = new RegExp(patternstring, "i");
+			for (var i in results)
+			{
+				var result = results[i];
+				var matches = pattern.exec(result);
+				if (!matches) continue;
+				var divcontents = "";
+				for (var j = 1; j < matches.length - 2; j += 2)
+				{
+					divcontents += matches[j] + "<span class='match'>" + matches[j + 1] + "</span>";
+				}
+				divcontents += matches[j];
+				$searchresults.append("<div class='result'>" + divcontents + "</div>");
+			}
+		}
+
+		if ($searchresults.is(":empty"))
+		{
+			$searchresults.hide();
+		}
+		else
+		{
+			$searchresults.show();
+		}
+	}
+
+	function addresults(results)
+	{
+		for (var i in results)
+		{
+			var result = results[i];
+			$searchresults.append("<div class='result'>" + result + "</div>");
+		}
+	}
+});