Ответ 1
В конце я ответил на свой вопрос и внес коррективы в этот Gist:
Я использую эту вилку библиотеки Bootstrap Twitter-загрузки, которая позволяет использовать асинхронные источники данных, а также события onselect. Он работает очень хорошо для меня до сих пор, но когда пользователь выходит за пределы поля (т.е. Не активно выбирает выпадающую запись), запускается событие onselect (которое в моем случае перенаправляет пользователя на другую страницу). Есть ли способ остановить событие onselect, если пользователь не нажимает? Вот что я до сих пор (в CoffeeScript):
$(document).ready ->
$('#inspection_name').typeahead(
source: (typeahead, query) ->
$.ajax(
url: "/inspections/search.json?name="+query
success: (data) =>
return_list = []
$(data.results.inspections).each ->
return_list.push("<span data-url='" + this.uri + "/edit'>" + this.name + ", " + this.town + "</span>")
typeahead.process(return_list)
)
onselect: (obj) =>
window.location.href = $(obj).attr("data-url")
)
В конце я ответил на свой вопрос и внес коррективы в этот Gist:
Для загрузочного буфера по умолчанию это будет работать:
$.fn.typeahead.Constructor.prototype.render = function (items) {
var that = this;
items = $(items).map(function (i, item) {
i = $(that.options.item).attr('data-value', item);
i.find('a').html(that.highlighter(item));
return i[0];
});
this.$menu.html(items);
return this;
};
Где-то после включения бутстрапа. (мин.) js
Вы можете установить атрибут в angular -bootstrap typehead
typeahead-focus-first="false"
Аналогичная опция доступна для jQuery
Все кредиты должны быть отправлены в @jrochkind, но я хотел бы ответить на этот вопрос из Библиографическая пустыня: переопределить тип начальной загрузки, чтобы изначально не выбрать здесь для более ясность.
Добавьте это где-нибудь после bootstrap.js
:
/**
* Makes it so the first typeahead result isn't auto selected
*
* @author Jonathan Rochkind
* @url http://bibwild.wordpress.com/2013/04/04/overriding-bootstrap-typeahead-to-not-initially-select/
*/
$.fn.typeahead.Constructor.prototype.select = function() {
var val = this.$menu.find('.active').attr('data-value');
if (val) {
this.$element
.val(this.updater(val))
.change();
}
return this.hide()
};
var newRender = function(items) {
var that = this
items = $(items).map(function (i, item) {
i = $(that.options.item).attr('data-value', item);
i.find('a').html(that.highlighter(item));
return i[0];
});
this.$menu.html(items);
return this;
};
$.fn.typeahead.Constructor.prototype.render = newRender;