JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<script src="https://raw.githubusercontent.com/jeancroy/FuzzySearch/master/demo/movies.json"></script>
<!DOCTYPE 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="https://raw.githubusercontent.com/jeancroy/FuzzySearch/master/dist/FuzzySearch.min.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
    //

   ...