Typeaheadmap Updated

Typeaheadmap has been updated to 1.0.1

The only change: sticky last item

Updating should not be a problem. To use the sticky last item add ‘notfound’ to your typeaheadmap config. It could look like (more example here:

$("#keys").typeaheadmap({
		"source" : listofcapitals,
		"notfound": new Array({'k' :"Capital Does Not Exist?", 'v': "",'d': "You typed something that is not in the list"}),
		"key" : "k",
		"value" : "v",
		"items": 11,
		"listener" : function(k, v) {
		    $("#values").val(v)
		    $(listofcapitals).each(function(i, itm) {
				if (itm["k"] == k && itm["v"]==v) {
				    $("#description").html(itm["d"]);
				}
		    })
		},
		"displayer": function(that, item, highlighted) {
		    return highlighted + ' (' + item[that.value] + ' )' 
		}
	    })

Typeaheadmap Demo

Follow up on a previous post

A simple guide and demo for typeaheadmap on github pages

Extending Twitter Bootstrap Typeahead Plugin

Update: also read this post

In twitter bootstrap there is a JQuery plugin for auto completion. It’s called bootstrap-typeahaed. Typeahead uses an array of strings as datasource and is easily activated with in it’s simplest form 1 line of code.

$("#inputboxselector").typeahead({ "source":arrayOfStrings})

It’s very easy to use but somewhat limited. We needed a slightly different functionality.

Our use case:

  • 2 inputboxes, one for postal code (the numeric form) and one inputbox for the community that has that postal code.
  • In Belgium different communities can have the same postal code, and the right community should be selected on selecting a postal code. Or the right postal code should be selected on selecting a community.
  • Show both the code an city in the autocomplete but only do autocomplete and highlighting on one of the fields depending on the inputbox.

The typeahead plugin is not suited for that. It only takes an array of strings and sets the selected value in the input box. We have an array of objects.
Objects like

{ "code":"9000", "city":"Gent"}

We wanted to use typeahead instead of any other existing JQuery plugin since we’re already using twitter bootstrap.

To achieve this I extended, (actually more copied and altered) typeahead. The result is here. I called it typeaheadmap. It works just like bootstrap typeahead except that you have to add 2 more parameters to typeahead options object. Include bootstrap-typeaheadmap.js (+ JQuery 1.7+) and typeaheadmap.css (+ bootstraps base css) to use it.

View a demo
Read on for a usage example Continue reading “Extending Twitter Bootstrap Typeahead Plugin”

%d bloggers like this: