fz-search
Version:
Fast aproximate string matching library for use in autocomplete, perform both search and highlight.
124 lines (84 loc) • 3.8 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo page for FuzzySearch Suggestion engine</title>
<link href="demo.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.min.js"></script>
<!--script src="../dist/FuzzySearch.min.js"></script-->
<script src="../dist/FuzzySearch.js"></script>
<script>
//----------------------------------
// Minimalist example from manual
// Rest of the page is for the basic interactive gui.
var data = ["survey", "surgery", "insurgence", "potato", "ham", "tower", "lego"];
var searcher = new FuzzySearch({source: data});
var query = "assurance";
var result = searcher.search(query);
console.log(result);
</script>
</head>
<body>
<h1>FuzzySearch Demo</h1>
<p>Demo page for <a href="https://github.com/jeancroy/FuzzySearch">FuzzySearch Suggestion engine</a>. </p>
<p>List is from the <a href="http://www.nytimes.com/ref/movies/1000best.html">New York Times top 1000 movie list</a>. </p>
<p>This demo is for a minimal setup with a list of string source, of <a href="movies.json">about 20kb</a></p>
<p>Want a demo with multiple fields and/or performance information? it's <a href="autocomplete.html">here</a>. </p>
<h2>Using Twitter Typeahead</h2>
<div class="typeahead">
<input id="demo-query" class="twitter-typeahead" name="demo-query" autocomplete="off" type="text">
</div>
<!-- allow to scroll so autocomplete is at top of page -->
<div style="height: 500px;"></div>
<script>
//
// Create main object
// We will fill the data once we have the JSON loaded
//
var fuzzyhound = new FuzzySearch();
//- - - - - - - - - - -
// Typeahead Setup
// - - - - - - - - - - -
$('#demo-query').typeahead({
minLength: 2,
highlight: false //let FuzzySearch handle highlight
},
{
name: 'movies',
source: fuzzyhound,
templates: {
suggestion: function(result){return "<div>"+fuzzyhound.highlight(result)+"</div>"}
}
});
// - - - - - - - - - - - -
// Setup dataset
//- - - - - - - - - - - - -
$.ajaxSetup({cache: true});
function setsource(url, keys, output) {
$.getJSON(url).then(function (response) {
fuzzyhound.setOptions({
source: response,
keys: keys,
output_map: output
})
});
}
// Load movie dataset, default options are good for list of string.
setsource("movies.json");
// > This would be equivalent. (Note that "root." on output is optional)
//setsource("movies.json","","root.item");
// > Source is a bit more complex, but we output a list of string
//setsource("books.json","item.title","item.title");
// > For multiple keys to index keys is an array. Also note that "item." is optional on keys
//setsource("books.json",["title","author"],"item.title");
// > To make sens of the optional prefix you can think that
// - "item" always refer to your data, an item in the source array
// - "root" refer to an object that hold your data with additional information.
//
// output_map="", output_map="." or output_map="root" allow to get SearchResult object
// this is needed to get score or matching field of item
</script>
</body>
</html>