У меня возникли проблемы с поиском учебника о том, как создать простой поисковый запрос или фильтр строк для Twitter Bootstrap. Я пробовал много, я не уверен, что я делаю что-то неправильно или плагины не совместимы с Bootstrap. Пожалуйста, помоги, если можешь.
Я пробовал:
$(document).ready(function() {
//Declare the custom selector 'containsIgnoreCase'.
$.expr[':'].containsIgnoreCase = function(n,i,m){
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$("#search").keyup(function(){
$("#tabela").find("tr").hide();
var data = this.value.split(" ");
var jo = $("#tabela").find("tr");
$.each(data, function(i, v){
//Use the new containsIgnoreCase function instead
jo = jo.filter("*:containsIgnoreCase('"+v+"')");
});
jo.show();
}).focus(function(){
this.value="";
$(this).css({"color":"black"});
$(this).unbind('focus');
}).css({"color":"#C0C0C0"});
});
Ничего с этим... Возможно, мне не хватает какого-либо "id" на моем столе или в поле поиска, я новичок в этом.
Вот что я использую:
$('input.filter').live('keyup', function() {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function() {
return rex.test($(this).text());
}).show();
});
Чтобы использовать его, вы просто создаете таблицу с телом с классом "поиск", а затем вход с классом "фильтр" где-то на вашей странице (я предпочитаю помещать их в всплывающее окно Bootstrap за значком поиска).
Это живой пример решения, предоставленного Филиппом Лепаланом. Большое спасибо за этот небольшой и совершенный код.
$(document).ready(function () {
(function ($) {
$('#filter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});