Fuzzy filtering

package.json

@@ -4,7 +4,7 @@
   "description": "A typeahead component for inputs",
   "main": "index.js",
   "scripts": {
-    "start": "budo index.js --serve=dist/suggestions.js --live -d | bistre",
+    "start": "budo index.js --serve=dist/suggestions.js --live -d",
     "build": "browserify index.js | uglifyjs -c -m > dist/suggestions.js",
     "lint": "eslint --no-eslintrc -c .eslintrc index.js src",
     "docs": "documentation --format=md > API.md",
@@ -26,9 +26,8 @@
   },
   "homepage": "https://github.com/tristen/suggestions#readme",
   "devDependencies": {
-    "bistre": "^1.0.1",
     "browserify": "^12.0.1",
-    "budo": "^5.1.5",
+    "budo": "^7.0.2",
     "documentation": "^3.0.0",
     "eslint": "^1.7.3",
     "smokestack": "^3.4.1",
@@ -37,6 +36,7 @@
     "uglify-js": "^2.5.0"
   },
   "dependencies": {
+    "fuzzy": "^0.1.1",
     "xtend": "^4.0.0"
   }
 }

src/list.js

@@ -53,7 +53,7 @@ List.prototype.drawItem = function(item, active) {
 
   if (active) li.className += ' active';
 
-  a.innerHTML = this.component.highlight(item);
+  a.innerHTML = item.string;
 
   li.appendChild(a);
   this.element.appendChild(li);

src/suggestions.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var extend = require('xtend');
+var fuzzy = require('fuzzy');
 var List = require('./list');
 
 var Suggestions = function(el, data, options) {
@@ -21,19 +22,19 @@ var Suggestions = function(el, data, options) {
   this.list.draw();
 
   this.el.addEventListener('keyup', function(e) {
-    this.handleKeyUp.call(this, e.keyCode);
+    this.handleKeyUp(e.keyCode);
   }.bind(this), false);
 
   this.el.addEventListener('keydown', function(e) {
-    this.handleKeyDown.call(this, e);
+    this.handleKeyDown(e);
   }.bind(this));
 
   this.el.addEventListener('focus', function() {
-    this.handleFocus.call(this);
+    this.handleFocus();
   }.bind(this));
 
   this.el.addEventListener('blur', function() {
-    this.handleBlur.call(this);
+    this.handleBlur();
   }.bind(this));
 
   return this;
@@ -75,7 +76,7 @@ Suggestions.prototype.handleKeyDown = function(e) {
     case 13: // ENTER
     case 9:  // TAB
       if (!this.list.isEmpty()) {
-        this.value(this.list.items[this.list.active]);
+        this.value(this.list.items[this.list.active].original);
         this.list.hide();
       }
     break;
@@ -144,15 +145,14 @@ Suggestions.prototype.value = function(value) {
 };
 
 Suggestions.prototype.getCandidates = function(callback) {
-  var items = [];
-
-  for (var i = 0; i < this.data.length; i++) {
-    var candidate = this.getItemValue(this.data[i]);
-    if (this.match(this.normalize(candidate), this.query)) {
-      items.push(this.data[i]);
-    }
-  }
-  callback(items);
+  var options = {
+    pre: '<strong>',
+    post: '</strong>',
+    extract: function(d) { return this.getItemValue(d); }.bind(this)
+  };
+
+  var results = fuzzy.filter(this.query, this.data, options);
+  callback(results);
 };
 
 /**
@@ -165,17 +165,4 @@ Suggestions.prototype.getItemValue = function(item) {
   return item;
 };
 
-/**
- * Intercept an item from the results list & highlight the portion in the result
- * string that matches the query
- *
- * @param {String} item an item that qualifies as a result from the data array
- * @return {String} A formated string (HTML allowed).
- */
-Suggestions.prototype.highlight = function(item) {
-  return this.getItemValue(item).replace(new RegExp(this.query, 'ig'), function($1) {
-    return '<strong>' + $1 + '</strong>';
-  });
-};
-
 module.exports = Suggestions;

test/test.js

@@ -17,7 +17,7 @@ test('basics', function(t) {
   t.equal(suggestionsContainer.style.display, 'none', 'suggestions container is initially hidden');
   t.equal(typeahead.data, data, 'data is set');
 
-  input.value = 'bear';
+  input.value = 'ear';
 
   var keyUpEvent = document.createEvent('HTMLEvents');
   keyUpEvent.initEvent('keyup', true, false);