-
-
Save thefish/3636051 to your computer and use it in GitHub Desktop.
/* ============================================================= | |
* 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 <trashmailbox@e1.ru> | |
* / | |
!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); |
@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.
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.