add test for special chars, and fix quotes and other special chars no…

…t being interpreted correctly when searching.
britco · Feb 12, 2015 · c657327 · c657327
1 parent 32e15ef
commit c657327
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 15 deletions.
diff --git a/dist/form-helpers-latest.js b/dist/form-helpers-latest.js
@@ -1,8 +1,3 @@
-/*!
- * Form helpers
- * @author Paul Dufour
- * @company Brit + Co
- */
 /*!
  * Form helpers
  * @author Paul Dufour
@@ -76,6 +71,64 @@ $(document).ready(function() {
         }
         return arr;
     };
+    function mapKeyPressToActualCharacter(isShiftKey, characterCode) {
+        if (characterCode === 27 || characterCode === 8 || characterCode === 9 || characterCode === 20 || characterCode === 16 || characterCode === 17 || characterCode === 91 || characterCode === 13 || characterCode === 92 || characterCode === 18) {
+            return false;
+        }
+        if (typeof isShiftKey != "boolean" || typeof characterCode != "number") {
+            return false;
+        }
+        var _to_ascii = {
+            "188": "44",
+            "109": "45",
+            "190": "46",
+            "191": "47",
+            "192": "96",
+            "220": "92",
+            "222": "39",
+            "221": "93",
+            "219": "91",
+            "173": "45",
+            "187": "61",
+            "186": "59",
+            "189": "45"
+        };
+        var shiftUps = {
+            "96": "~",
+            "49": "!",
+            "50": "@",
+            "51": "#",
+            "52": "$",
+            "53": "%",
+            "54": "^",
+            "55": "&",
+            "56": "*",
+            "57": "(",
+            "48": ")",
+            "45": "_",
+            "61": "+",
+            "91": "{",
+            "93": "}",
+            "92": "|",
+            "59": ":",
+            "39": '"',
+            "44": "<",
+            "46": ">",
+            "47": "?"
+        };
+        if (characterCode in _to_ascii) {
+            characterCode = _to_ascii[characterCode];
+        }
+        var character;
+        if (!isShiftKey && (characterCode >= 65 && characterCode <= 90)) {
+            character = String.fromCharCode(characterCode + 32);
+        } else if (isShiftKey && shiftUps.hasOwnProperty(characterCode)) {
+            character = shiftUps[characterCode];
+        } else {
+            character = String.fromCharCode(characterCode);
+        }
+        return character;
+    }
     var defaultConfig = {
         selector: '.input.input-select:not([data-fancy-dropdowns="off"]) select',
         beforeActive: '<div class="icon-ui-dropdown-arrow"></div>',
@@ -125,8 +178,8 @@ $(document).ready(function() {
             ctx.selected = value;
             var label = $active.html();
             html += '<div class="select-active"';
-            html += 'data-value="' + escapeMarkup(value) + '"';
-            html += 'data-label="' + escapeMarkup(label) + '">';
+            html += ' data-value="' + escapeMarkup(value) + '"';
+            html += ' data-label="' + escapeMarkup(label) + '">';
             html += config.beforeActive || "";
             html += label + "</div>";
             html += '<ul class="select-options dropdown-options" style="';
@@ -250,7 +303,10 @@ $(document).ready(function() {
         $(document).on("keyup" + ctx.ns + "active", function(e) {
             window.clearTimeout(ctx.updateAndCloseTimeout);
             ctx.search_term = ctx.search_term || "";
-            ctx.search_term += String.fromCharCode(e.keyCode).toLowerCase();
+            var character = mapKeyPressToActualCharacter(e.shiftKey, e.keyCode);
+            if (character != null && character != false) {
+                ctx.search_term += (character + "").toLowerCase();
+            }
             debounce(function() {
                 selectSearch.call(this, ctx);
             }, 15)();
@@ -306,7 +362,7 @@ $(document).ready(function() {
     }
     function selectSearch(ctx) {
         var searchTerm = ctx.search_term.trim();
-        var match = ctx.$options.find('> li[data-label-slug^="' + escapeMarkup(searchTerm) + '"]').first();
+        var match = ctx.$options.find('> li[data-label-slug^="' + escapeMarkup(searchTerm) + '"],									 	 > li[data-label-slug^="' + searchTerm + '"]').first();
         if (match.length) {
             selectUpdateHover(ctx, match);
             if (Element.prototype.scrollIntoViewIfNeeded) {

diff --git a/src/fancy_dropdowns.js b/src/fancy_dropdowns.js
@@ -53,7 +53,75 @@ $(document).ready(function() {
 			}
 		}
 		return arr;
-	};
+	}
+
+	// See http://stackoverflow.com/a/4786582/2763703 and
+	// http://stackoverflow.com/a/13127566/2763703
+	function mapKeyPressToActualCharacter(isShiftKey, characterCode) {
+		if (characterCode === 27 || characterCode === 8 || characterCode === 9 || characterCode === 20 || characterCode === 16 || characterCode === 17 || characterCode === 91 || characterCode === 13 || characterCode === 92 || characterCode === 18) {
+			return false;
+		}
+
+		if (typeof isShiftKey != "boolean" || typeof characterCode != "number") {
+			return false;
+		}
+
+		var _to_ascii = {
+			'188': '44',
+			'109': '45',
+			'190': '46',
+			'191': '47',
+			'192': '96',
+			'220': '92',
+			'222': '39',
+			'221': '93',
+			'219': '91',
+			'173': '45',
+			'187': '61', //IE Key codes
+			'186': '59', //IE Key codes
+			'189': '45' //IE Key codes
+		};
+
+		var shiftUps = {
+			"96": "~",
+			"49": "!",
+			"50": "@",
+			"51": "#",
+			"52": "$",
+			"53": "%",
+			"54": "^",
+			"55": "&",
+			"56": "*",
+			"57": "(",
+			"48": ")",
+			"45": "_",
+			"61": "+",
+			"91": "{",
+			"93": "}",
+			"92": "|",
+			"59": ":",
+			"39": "\"",
+			"44": "<",
+			"46": ">",
+			"47": "?"
+		};
+
+		if (characterCode in _to_ascii) {
+			characterCode = _to_ascii[characterCode];
+		}
+
+		var character;
+
+		if (!isShiftKey && (characterCode >= 65 && characterCode <= 90)) {
+			character = String.fromCharCode(characterCode + 32);
+		} else if (isShiftKey && shiftUps.hasOwnProperty(characterCode)) {
+			character = shiftUps[characterCode];
+		} else {
+			character = String.fromCharCode(characterCode);
+		}
+
+		return character;
+	}
 
 	// Config
 	var defaultConfig = {
@@ -133,8 +201,8 @@ $(document).ready(function() {
 			var label = $active.html();
 
 			html += '<div class="select-active"';
-			html += 'data-value="'+ escapeMarkup(value) + '"';
-			html += 'data-label="'+ escapeMarkup(label) +'">';
+			html += ' data-value="'+ escapeMarkup(value) + '"';
+			html += ' data-label="'+ escapeMarkup(label) +'">';
 			html += (config.beforeActive || '');
 			html += label + '</div>';
 
@@ -322,7 +390,10 @@ $(document).ready(function() {
 			window.clearTimeout(ctx.updateAndCloseTimeout);
 
 			ctx.search_term = ctx.search_term || '';
-			ctx.search_term += String.fromCharCode(e.keyCode).toLowerCase();
+			var character = mapKeyPressToActualCharacter(e.shiftKey, e.keyCode);
+			if(character != null && character != false) {
+				ctx.search_term += (character + '').toLowerCase();
+			}
 
 			// Do a new search
 			debounce(function() {
@@ -402,10 +473,15 @@ $(document).ready(function() {
 	// If there is a matching term, focus on it
 	function selectSearch(ctx) {
 		var searchTerm = ctx.search_term.trim();
+		// You shouldn't need to search for escaped and non-escaped, but you do..
+		// some things like > will match when escaped, but double quotes will only
+		// match when unescaped
 		var match = ctx.$options
-									 .find('> li[data-label-slug^="' + escapeMarkup(searchTerm) + '"]')
+									 .find(
+									 	'> li[data-label-slug^="' + escapeMarkup(searchTerm) + '"],\
+									 	 > li[data-label-slug^="' + searchTerm + '"]'
+									 )
 									 .first();
-
 		if(match.length) {
 			// Update the hover state to the new LI
 			selectUpdateHover(ctx,match);

diff --git a/test/specialchars.html b/test/specialchars.html
@@ -0,0 +1,43 @@
+<html>
+<head>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="../bower_components/every-insert/dist/every-insert-latest.js"></script>
+<script src="../dist/form-helpers-latest.js"></script>
+<style>
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+  .select-wrapper {
+    border: 1px solid black;
+  }
+
+  .select-active {
+    border: 1px solid orange;
+  }
+
+  li.hover {
+    color: red;
+  }
+
+  li.active,li:active {
+    color: blue;
+  }
+
+  .select-wrapper-open .select-options {
+    max-height: 300px !important;
+    overflow: scroll !important;
+  }
+</style>
+</head>
+<body>
+<div class="input input-select" style="float: left">
+  <select name="size">
+    <option value="az">az</option>
+    <option value="&quot;">&quot;</option>
+    <option value="&#39;">&#39;</option>
+    <option value="&gt;">&gt;</option>
+  </select>
+</div>
+</body>
+</html>