Hummingbird.js

Misspellings and nicknames are no match for this fast and forgiving typeahead engine

Before you finished reading, the data was loaded, indexed, and ready for quering.

This is a very basic example of integrating hummingbird.js with Twitter Typeahead ui library.

See more about customizing the display style of Twitter Typeahead here: http://twitter.github.io/typeahead.js/.

Sample Code:

            <script src="jquery-1.11.0.min.js"/>
            <script src="../../hummingbird.js" type="text/javascript" charset="utf-8"/>
            <script src="typeahead.jquery.js" type="text/javascript" charset="utf-8"/>
            <script type="text/javascript" charset="utf-8"/>
              var idx
              var twitOpts = {hint: true, highlight: false, minLength: 1}
              var dataSource = {name: 'countries', displayKey: 'name', source: searchText}

              $(document).ready(function () {
                $.ajaxSetup({ cache: false })
                $("#searchTerm").typeahead(twitOpts, dataSource).focus();
                console.time("load")
                var variants = {
                  'great britain': ['united kingdom', 'britain', 'uk', 'u.k.', 'england'],
                  'britain':['united kingdom','great britain','uk','england'],
                  'united kingdom':['britain','great britain','uk','england'],
                  'uk':['united kingdom','britain','great britain','england'],
                  'england':['united kingdom','britain','great britain','uk'],
                  'United States': ['america', 'usa'],
                  'usa': ['United States', 'america'],
                  'america': ['united states', 'usa', 'america'],
                  'russia': ['russian federation', 'soviet union', 'ussr'],
                  'russian federation': ['russia', 'soviet union', 'ussr'],
                  'ussr': ['russian federation', 'soviet union', 'russia'],
                  'soviet union': ['russian federation', 'ussr', 'russia']
                };
                idx = new hummingbird.Index(variants);
                //idx.tokenizer = new hummingbird.tokenizer(2,4)
                hummingbird.loggingOn = true;
                $.getJSON('../raw-countries.json')
                .success(function (rawData) {
                  rawData.forEach(function (item){
                    idx.add({id:item.numeric_code, name:item.country, lat:item.latitude_average, long:item.longitude_average});
                  });
                });
                console.timeEnd("load");
              });

              function searchText(query, cb) {
                var searchTerm = $("#searchTerm").val().trim();
                hbOpts = {'boostPrefix': false}
                console.time('search');
                idx.search(query, cb, hbOpts);
                console.timeEnd('search');
              }
            </script>

            <style type="text/css" media="screen">

              body {
                background-color: #FFFFFF;
                color: #666666;
                font-family: 'Helvetica Neue';
                font-size: 16px;
              }

              input {
                width: 300px;
                font-size: 1.4em;
                max-height: 50px;
                line-height: 30px;
                overflow-y: auto;
                border: 2px solid #ccc;
                -webkit-border-radius: 8px;
                border-radius: 8px;
                outline: none;
                padding: 8px 12px;
              }

              .multiple-datasets {
                margin: 0 20px 5px 20px;
                padding: 3px 0;
                border-bottom: 1px solid #ccc;
              }

              .tt-dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0px;
                z-index: 100;
                display: none;
                right: auto;
                box-shadow: 0 5px 10px rgba(0,0,0,.2);
              }

              .tt-dataset-countries {
                display: block;
                margin: 0 20px 5px 20px;
                padding: 3px 0;
                border-bottom: 1px solid #ccc;
              }
            </style>