fuzzy.js
Version:
Approximate (fuzzy) string matching just like you are used to from Sublime Text and others.
106 lines (90 loc) • 4.1 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>fuzzy.js demo</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css'>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<div class='container'>
<div class='page-header'>
<h1>
fuzzy.js <small>fuzzy string matching</small>
<a href="https://secure.travis-ci.org/#!/bripkens/fuzzy.js"><img src="https://secure.travis-ci.org/bripkens/fuzzy.js.png" alt="Build Status"></a>
</h1>
</div>
<p class='lead'>
Fuzzy.js is a library for approximate (fuzzy) string matching.
fuzzy.js' algorithm is very lightweight and is aimed to provide an
experience which you may know from editors such as Sublime Text 2,
TextMate and others.
</p>
<h2>Demo</h2>
<div class='row'>
<div class='span6'>
<p>
Use the demo like an auto-completion search box on the web. Start
typing to get a list of the 5 best matching available items. The
demo applies fuzzy matching to the following items.
</p>
<ul id='demoItems'>
</ul>
</div>
<div class='span6'>
<div class='fuzzy-search-wrapper'>
<div class='fuzzy-search'>
<input type='text' class='search-query' autofocus>
</div>
<ul>
</ul>
</div>
</div>
</div>
<h2>Usage</h2>
<pre>
<code class='language-markup'><script type='text/javascript' src='js/fuzzy.js'></script>
<script type='text/javascript'></code><code class='language-javascript'>
var query = 'majs';
var term = 'main.js';
var match = fuzzy(term, query);
console.log(match.score); // 8
console.log(match.query); // 'majs'
console.log(match.term); // 'main.js'
console.log(match.highlightedTerm); // '<em>m</em><em>a</em>in.<em>j</em><em>s</em>'
// sorting an array of matches
var matches = [ ... ];
matches.sort(fuzzy.matchComparator); // sorts descending</code>
<code class='language-markup'></script></code></pre>
<h2>Configuration options</h2>
<pre>
<code class='language-markup'><script type='text/javascript' src='js/fuzzy.js'></script>
<script type='text/javascript'></code><code class='language-javascript'>
// change the character sequences that are used to highlight matches
fuzzy.highlighting.before = '<';
fuzzy.highlighting.after = '>';
// enable sub term matches. See beflow for an example
fuzzy.analyzeSubTerms = true;
var query = 'Halleluja',
var term = 'luja';
var match = fuzzy(term, query);
console.log(match.score); // 10
console.log(match.query); // 'luja'
console.log(match.term); // 'Halleluja'
console.log(match.highlightedTerm); // 'Halle<l><u><j><a>'
// now let us check this out without sub term matches
fuzzy.analyzeSubTerms = false;
match = fuzzy(term, query);
console.log(match.score); // 8
console.log(match.query); // 'luja'
console.log(match.term); // 'Halleluja'
console.log(match.highlightedTerm); // 'Ha<l>lel<u><j><a>'</code>
<code class='language-markup'></script></code></pre>
</div>
<a href="https://github.com/bripkens/fuzzy.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js'></script>
<script type='text/javascript' src='../fuzzy.min.js'></script>
<script type='text/javascript' src='js/main.js'></script>
</body>
</html>