{"id":389,"date":"2013-08-23T13:47:23","date_gmt":"2013-08-23T18:47:23","guid":{"rendered":"http:\/\/www.aibistin.com\/?p=389"},"modified":"2013-08-25T21:10:29","modified_gmt":"2013-08-26T02:10:29","slug":"city-state-county-selection-using-bootstrap-2-typeahead","status":"publish","type":"post","link":"https:\/\/www.aibistin.com\/?p=389","title":{"rendered":"City, State, County Selection With Bootstrap 2 Typeahead"},"content":{"rendered":"

\n This is a demonstration of how I implemented an Ajax call to a Perl Dancer2 Application using jQuery and the Bootstrap Typeahead function.\n<\/p>\n

\nAs part of my TravelTime App <\/a>, I wanted to create and easy way to select the start and end locations using the jQuery Autocomplete component. Bootstrap 2 has its own version of this which they call Typeahead<\/a>.
\nI just found out that the latest version of Bootstrap will not include this Typeahead functionality. Instead it will be replaced with typeahead.js<\/a> I hope to check this out in the future.<\/em>
\nAnyway, I will be using Perl<\/a>, Dancer2<\/a> with Template Toolkit<\/a> to render this form.
\nI also needed to customise the Typeahead to complete an Ajax call to my Perl Dancer2 application. The Dancer2 application will then provide the sorted list of City,States and Counties based on the search parameters passed to it.\n<\/p>\n

The Template::Toolkit Form<\/p>\n

Exerpt from travel_time_quick.tt<\/span><\/p>\n

\r\n<div class="span11">\r\n        <span class="text-info">\r\n            <abbr title='Enter the starting location'>Start Location<\/abbr>\r\n        <\/span>\r\n        <div class="control-group">\r\n        <!-- Bootstrap Typeahead -->\r\n            <label class="control-label" for="address-[% loop.count %]">[% warning_message %]<\/label>\r\n            <div class="controls">\r\n                <input type="text"\r\n                    class="cityStatesTypeahead span9 input-append"\r\n                    name="address-[% loop.count %]"\r\n                    id="address-[% loop.count %]" value="[% address %]"\r\n                    placeholder="City\/Town, State" \r\n                    autocomplete="off"\r\n                    data-provide="typeahead"\r\n                    required="required" \r\n                    autofocus\r\n                    \/>\r\n                    <span class="addQmark"><i class="iconic-question-mark"><\/i><\/span>\r\n            <\/div>\r\n            <input type="hidden"\r\n                name="h-address-[% loop.count %]"\r\n                id="h-address-[% loop.count %]"\r\n                value=""\r\n                \/>\r\n            <\/div>\r\n        <\/div> <!-- \/span11 -->\r\n<\/pre>\n
\nThe entire template can be seen here on GitHub<\/a>.
\nThe highlighted fields are the ones that are pertinent to the activation of the Bootstrap Typeahead<\/a>.
\nIn order to customise the Bootstrap Typeahead, I found this very useful website<\/a> by FusionGrokker, for which I am thankful (You could also check out the jQuery docs<\/a> for the original concept).\n<\/p>\n
\nHere is my JavaScript<\/a> to implement the Typeahead Ajax call.\n<\/p>\n
The jQuery<\/p>\n
Excerpt from city-states.js<\/span><\/p>\n
\r\nvar hiddenId;\r\n\/\/ Get the hidden address field associated with the current\r\n\/\/ address field\r\n$('.cityStatesTypeahead').bind('focus',  function(){\r\n   hiddenId =  $(this).attr('id'); \r\n});\r\n\r\n$(".cityStatesTypeahead").typeahead({\r\n  items: 10, \r\n  minLength : 3, \r\n  source:  function(query, process) {\r\n      \/\/Call Perl App to find the sorted list of City, States and Counties\r\n      return searchForPlaces(query, process);\r\n },  \r\n  highlighter: function(item){\r\n    return highLightSelect(item);\r\n},  \r\n\r\nmatcher: function () { return true; }, \r\n \r\nupdater: function (item) {\r\n    return updateField(item);\r\n}, \r\n\r\n});\r\n\/\/ Ajax call to Perl Dancer Script, which returns an Array Ref\r\n\/\/ of sorted City, State and County data.\r\nvar debounceWait = 100;\r\n\/\/ Use Underscore JS function '_debounce' to ensure that the\r\n\/\/ search waits for specific number of milliseconds before running again.\r\nvar cityStates = {};\r\nvar cityNames = [];\r\nvar searchForPlaces = _.debounce(function( query,  process ){\r\n    $.post("\/city_states",{ find : query}, function(data){\r\n    cityStates = {};\r\n    cityNames = [];\r\n        var counter = 0;\r\n        _.each( data.city_states,  function( item,  ix,  list ){\r\n        item.label = item + '-' + (counter++);\r\n         \/\/ console.log('Got this item from AJAX : ' + item);\r\n        cityStates[item.label] = {\r\n                city : item[0],   \r\n                state : item[1],  \r\n                county : item[2]\r\n        };\r\n        \/\/add selected items to diaplay array\r\n        \/\/ console.log('Add this to the array ' + item.label);\r\n        cityNames.push(item.label);\r\n\r\n    });\r\n    \/\/ Let Bootstrap and jQuery process the list\r\n    \/\/ for display in the input box\r\n    process( cityNames );\r\n});\r\n},  debounceWait);\r\n\r\n\/\/Highlighter Function\r\nvar highLightSelect = function(item){\r\n    \/\/ console.log("      Item inside highlighter " + item);\r\n   var c = cityStates[item];\r\n   return ''\r\n       + "<div class='typeahead_wrapper'>"\r\n       + "<div class='typeahead_labels'>"\r\n       + "<div class='typeahead_primary'>" + c.city + ', ' + c.state + "<\/div>"\r\n       + "<div class='typeahead_secondary'><strong>County: <\/strong>"  + c.county + "<\/div>"\r\n       + "<\/div>"\r\n       + "<\/div>";\r\n};\r\n\r\n\/\/ Updater Function\r\n\/\/ Add the required data into the input field\r\nvar updateField = function(item){\r\n   var c = cityStates[item];\r\n   \/\/Hidden field will contain all the valuable data\r\n    $( "#h-" + hiddenId ).val( c.city + ',' + c.state + ',' + c.county );\r\n   \/\/This is the data for display on input box\r\n   return c.city + ', ' + c.state + "  County: " + c.county ;\r\n};\r\n\r\n\/\/      END BOOTSTRAP TYPEAHEAD\r\n\r\n\r\n<\/pre>\n
\nHave a look at line 34 for the actual Ajax call to the Perl module<\/a>. It sends a request to TravelTime.pm’s ‘\/city_state’ route. As the Typeahead attribute ‘minLength’ is set to 3, it passes at least the first three letters of the requested City to the Dancer2 application. The city_states database is then searched for a city beginning with this search string. The Dancer2 application will return a sorted list of these cities with their corresponding state and county names. The application can also accept two search strings separated by a comma. This will search the database for cities beginning with the first string and corresponding states beginning with the second string.
\n“city-states.js” receives this sorted list of cities, states and counties.
\nThe Typeahead displays (items: 10) items in the dropdown list.The “highLightSelect” highlighter function formats this list into a more readable format.
\nWhen an item is selected “theupdateField” populates the hidden fields.\n<\/p>\n