Asynchronous Auto-Complete Input Fields with Bootstrap Typeahead – Update

A while ago I posted about implementing the Bootstrap Typeahead component using an async call. Since that post I have received various requests from people with questions about this approach so I have taken the liberty to make a slightly more complete example than the one shown in the original post.

I have a ZIP file to download at the end of this post with the complete example but I’d like to quickly run through the code so it makes sense to anyone reading this.

This is the main script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready( function() {
   $('#myinput').typeahead( {
      source: function( query , process ) {
         $.get("mydata.json", {
            query: query
         },
         function( data ) {
            data = [
               "London (LON) London - United Kingdom",
               "Longana (LOD) Longana - Vanuatu",
               "Long Island (LGI) Deadmans Cay - Bahamas",
               "Londrina (LDB) Londrina - Brazil",
               "Changchun (CGQ) Longjia International - China",
               "Guiyang (KWE) Longdongbao International - China",
               "Long Banga (LBP) Long Banga Airfield - Malaysia",
               "Longyearbyen (LYR) Svalbard - Norway",
               "London (STN) Stansted - United Kingdom",
               "London (LCY) London City Airport - United Kingdom",
               "London (LHR) Heathrow - United Kingdom",
               "London (LGW) Gatwick - United Kingdom",
               "Islip (ISP) Long Island Macarthur - United States",
               "Long Beach (LGB) Long Beach Municipal - United States",
               "Lonorore (LNE) Lonorore - Vanuatu",
               "Long Island\/Happy Bay (HAP) Long Island - Australia",
               "Longreach (LRE) Longreach - Australia"
            ];
 
            process(data);
         } );
      },
   } );
} );

This code is basically the same as the code used in my previous post, however, I have changed the jQuery POST to a GET for the purpose of demonstration. The example in the ZIP file will run without needing the use of a web server but since that’s the case, it’s not possible to use an HTTP POST. Normally of course you’d use a POST in the same way I did it in the original example.

The example loads a dummy JSON file from the file system which triggers the onload callback. In the example above this callback is a nameless function defined at function( data ).

When the call back is triggered, normally we’d receive some data in the data parameter. However, since the example above doesn’t receive real data we’re hard coding a result set. This result set is a linear list of elements which get passed to the process function. If you’re using live data, then this might also be a good opportunity to reformat your data to something the Typeahead can work with.

The process function is defined as part of the Bootstrap Typeahead component. All you have to do is pass on the result set to it and it will take care of the actual drop down with character highlighting etc.

So without further ado, please download the ZIP file: Bootstrap Typeahead demo.

This entry was posted in Programming. Bookmark the permalink. Both comments and trackbacks are currently closed.