twitter bootstrap typeahead modified to work with array of key-value objects.

bootstrap-typeahead-objects-array.js

/* =============================================================
 * bootstrap-typeahead.js v2.1.1
 * http://twitter.github.com/bootstrap/javascript.html#typeahead
 * =============================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============================================================ */

/*
 * Modified by Anton Gurov <[email protected]>
 * /

!function($){

  "use strict"; // jshint ;_;


 /* TYPEAHEAD PUBLIC CLASS DEFINITION
  * ================================= */

  var Typeahead = function (element, options) {
    this.$element = $(element)
    this.$hiddeninput = $('<input type="hidden" name="'
            +this.$element.attr('name')+'-data-id" value="">').insertAfter(this.$element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    this.matcher = this.options.matcher || this.matcher
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
    this.$menu = $(this.options.menu).appendTo('body')
    this.source = this.options.source
    this.shown = false
    this.listen()
  }

  Typeahead.prototype = {

    constructor: Typeahead

  , select: function () {
      var val = this.$menu.find('.active').attr('data-value')
      var id = this.$menu.find('.active').attr('data-id')
      this.$element
        .val(this.updater(val))
        .change()
      this.$hiddeninput
        .val(this.updater(id))
        .change()
      return this.hide()
    }

  , updater: function (item) {
      return item
    }

  , show: function () {
      var pos = $.extend({}, this.$element.offset(), {
        height: this.$element[0].offsetHeight
      })

      this.$menu.css({
        top: pos.top + pos.height
      , left: pos.left
      })

      this.$menu.show()
      this.shown = true
      return this
    }

  , hide: function () {
      this.$menu.hide()
      this.shown = false
      return this
    }

  , lookup: function (event) {
      var items

      this.query = this.$element.val()

      if (!this.query || this.query.length < this.options.minLength) {
        return this.shown ? this.hide() : this
      }

      items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source

      return items ? this.process(items) : this
    }

  , process: function (items) {
      var that = this
      console.log(items);

      items = $.grep(items, function (item) {
        return that.matcher(item)
      })

      items = this.sorter(items)

      if (!items.length) {
        return this.shown ? this.hide() : this
      }

      return this.render(items.slice(0, this.options.items)).show()
    }

  , matcher: function (item) {
      //return ~item.toLowerCase().indexOf(this.query.toLowerCase())
      return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
    }

  , sorter: function (items) {
      var beginswith = []
        , caseSensitive = []
        , caseInsensitive = []
        , item

      while (item = items.shift()) {
        if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
        else if (~item.name.indexOf(this.query)) caseSensitive.push(item)
        else caseInsensitive.push(item)
      }

      return beginswith.concat(caseSensitive, caseInsensitive)
    }

  , highlighter: function (item) {
      var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
      return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
        return '<strong>' + match + '</strong>'
      })
    }

  , render: function (items) {
      var that = this

      items = $(items).map(function (i, item) {
        i = $(that.options.item).attr('data-value', item.name).attr('data-id', item.id)
        i.find('a').html(that.highlighter(item))
        return i[0]
      })

      items.first().addClass('active')
      this.$menu.html(items)
      return this
    }

  , next: function (event) {
      var active = this.$menu.find('.active').removeClass('active')
        , next = active.next()

      if (!next.length) {
        next = $(this.$menu.find('li')[0])
      }

      next.addClass('active')
    }

  , prev: function (event) {
      var active = this.$menu.find('.active').removeClass('active')
        , prev = active.prev()

      if (!prev.length) {
        prev = this.$menu.find('li').last()
      }

      prev.addClass('active')
    }

  , listen: function () {
      this.$element
        .on('blur',     $.proxy(this.blur, this))
        .on('keypress', $.proxy(this.keypress, this))
        .on('keyup',    $.proxy(this.keyup, this))

      if ($.browser.chrome || $.browser.webkit || $.browser.msie) {
        this.$element.on('keydown', $.proxy(this.keydown, this))
      }

      this.$menu
        .on('click', $.proxy(this.click, this))
        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
    }

  , move: function (e) {
      if (!this.shown) return

      switch(e.keyCode) {
        case 9: // tab
        case 13: // enter
        case 27: // escape
          e.preventDefault()
          break

        case 38: // up arrow
          e.preventDefault()
          this.prev()
          break

        case 40: // down arrow
          e.preventDefault()
          this.next()
          break
      }

      e.stopPropagation()
    }

  , keydown: function (e) {
      this.suppressKeyPressRepeat = !~$.inArray(e.keyCode, [40,38,9,13,27])
      this.move(e)
    }

  , keypress: function (e) {
      if (this.suppressKeyPressRepeat) return
      this.move(e)
    }

  , keyup: function (e) {
      switch(e.keyCode) {
        case 40: // down arrow
        case 38: // up arrow
          break

        case 9: // tab
        case 13: // enter
          if (!this.shown) return
          this.select()
          break

        case 27: // escape
          if (!this.shown) return
          this.hide()
          break

        default:
          this.lookup()
      }

      e.stopPropagation()
      e.preventDefault()
  }

  , blur: function (e) {
      var that = this
      setTimeout(function () { that.hide() }, 150)
    }

  , click: function (e) {
      e.stopPropagation()
      e.preventDefault()
      this.select()
    }

  , mouseenter: function (e) {
      this.$menu.find('.active').removeClass('active')
      $(e.currentTarget).addClass('active')
    }

  }


  /* TYPEAHEAD PLUGIN DEFINITION
   * =========================== */

  $.fn.typeahead = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('typeahead')
        , options = typeof option == 'object' && option
      if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.typeahead.defaults = {
    source: []
  , items: 8
  , menu: '<ul class="typeahead dropdown-menu"></ul>'
  , item: '<li><a href="#"></a></li>'
  , minLength: 1
  }

  $.fn.typeahead.Constructor = Typeahead


 /*   TYPEAHEAD DATA-API
  * ================== */

  $(function () {
    $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
      var $this = $(this)
      if ($this.data('typeahead')) return
      e.preventDefault()
      $this.typeahead($this.data())
    })
  })

}(window.jQuery);

How it works: you create an input, and initiate typeahead, like this:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('input[name=bpc_name]').typeahead({
            source: function(query, process) {
                $.ajax({
                    url: '/welcome/ajax',
                    data: {
                        "type": "bpc",
                        "q" : query
                    },
                    type: "POST",
                    success: function(response) {
                        return process(response);
                    }
                });
            },
            minLength: 3
        });
    });
</script>

a bit old-school, i know.

Your server-side script must return an array of objects {"id":,"name":}, like this (PHP):

 <?php
 $response = array(
 array( 'id' => '255123', 'name' => 'ololo'),
 array('id' => '123255', 'name' => 'trololo'),
 );
 header("Content-Type: application/json");
 echo json_encode($response);
 ?>

HEADERS ARE FUCKING IMPORTANT!

During initiation typeahead creates a hidden input next to input where typeahead was initiated, and names it like "input_name-data-id".
When user selects an entry, both inputs are updated - visible input receives "name" property of object, hidden input receives "id" property of object.

Then you can read vaue of hidden input and use it as you like. Send it in a form, for example.

Enjoy!

Thanks for creating this. How does this handles a list of users with full names?
There can be two people named 'John Smith' with different ids.

Np, feel free to use this.
I suppose it will work fine with two objects with same names, there will be just two items with identical names in typeaheads dropdown. Chosen id will depend on which entry was selected by user. I think you should create a way to distinguish such entries, beacuse user could not distinguish two "John Smiths" by himself. You could add a city, or phone number, or state etc to the "name" property.

@justthefish, I have the above stuff implemented...but mine isn't working. I can't wrap my stupid head around this one. What are the data 'type' and 'q' items for?

@doublenit, these are just request parameters keys to select right data from the right table. Sorry, i have inserted some production code from my pet project.

Effectively these request parameters mean, that browser sends a request like
POST /welcome/ajax?type=bpc&q=<letters you typed>
while you mash buttons in typeahead field.

You can process this particular request in your server-side code like this:
WARNING This is demo pseudo-code. In real world you should never construct sql queries like this, it's a invitation to sql-inject you.

<?php 
Class welcome extends Controller {
  ...
  function ajax() {
    $table = $_POST["type"];
    $q = $_POST["q"];

    $query = "select id, name from $table where name like %$q% order by name desc limit 10";

    $set = DB::me()->db->query($query);
    foreach($set as $row) {
        $response[] = $row;
    }
    header('application/json');
    echo json_encode($response);
    die();
  }
  ...
}
?>

You can change request parameters as you like, the only requirement is that your server should response with valid json set of id => name records.

Also please keep in mind - this code was only a dirty-hack snippet. Modern bootstrap-typeahead.js has changed, and it may be not compatible with my snippet anymore. Consider using maintained modules like https://github.com/tcrosen/twitter-bootstrap-typeahead for your needs, if this snippet fails to work.