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 super simple example using trigrams of countries with avg latitude/longitude meta data.

Once the data is loaded into the page, it is available regardless of network connectivity. So, mobile users are immune from intermittent connectivity failures. Most importantly, users many hops away pay a one time penalty, not a penalty on every keystroke.

Sample Code:

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"/>
            <script src="../../hummingbird.js" type="text/javascript" charset="utf-8"/>
            <script type="text/javascript" charset="utf-8"/>
              var idx

              $(document).ready(function () {
                $.ajaxSetup({ cache: false })
                $("#searchTerm").keyup(searchText).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);
                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() {
                $("#matchResultsList").empty();
                var searchTerm = $("#searchTerm").val().trim();
                if (!searchTerm || searchTerm.length < 2) {
                  return;
                };
                options = {'boostPrefix': false}
                console.time('search');
                idx.search(searchTerm, showResults, options);
                console.timeEnd('search');
              }

              function showResults(results) {
                var frag = document.createDocumentFragment();

                $.each(results, function( i, val ) {
                  var li = document.createElement("li");
                  li.innerHTML = val.name + " (" + Math.round(val.lat) + "° lat | " + Math.round(val.long) + "° long)";
                  frag.appendChild(li);
                });
                $("#matchResultsList").append(frag);
              }
            </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;
              }
            </style>