Привет форумчане
Снова к вам за помощью))
У меня есть страница со списком и инпут фильтра, который скрывает несовпадающие элементы списка
Трудно представить как я уже промучался с этим долбаным плагином фильтра, но менять его не хочется(слишком много времени потратил на него)
Проблема в том, что элементы списка должны быть кликабельны, и всё работает нормально, до того как начал вводить что-нибудь в фильтр
Видимо, этот говнюк что-то делает с кодом, что он уже не подходит под селектор клика
Вобщем, после ввода значения в фильтр элементы списка становятся некликабельными. В консоли хрома ошибок нет и я даже не могу понять что надо делать и куда идти
Заметил только, что если убрать из скрипта код подкрашивания совпадающей части(52, 54 строки), то все работает нормально, но подкрашиванием пожертвовать не могу или если селектор клика вести только до li, но мне нужен сделать кликабельными 1 див и 1 спан
Вот сам код
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
/**
* fastLiveFilter jQuery plugin 1.0.3
*
* Copyright (c) 2011, Anthony Bush
* License: <http://www.opensource.org/licenses/bsd-license.php>
* Project Website: http://anthonybush.com/projects/jquery_fast_live_filter/
**/
jQuery.fn.fastLiveFilter = function(list, options) {
// Options: input, list, timeout, callback
options = options || {};
list = jQuery(list);
var input = this;
var lastFilter = '';
var timeout = options.timeout || 0;
var callback = options.callback || function() {};
var keyTimeout;
// NOTE: because we cache lis & len here, users would need to re-init the plugin
// if they modify the list in the DOM later. This doesn't give us that much speed
// boost, so perhaps it's not worth putting it here.
var lis = list.children();
var len = lis.length;
var oldDisplay = len > 0 ? lis[0].style.display : "block";
callback(len); // do a one-time callback on initialization to make sure everything's in sync
input.change(function() {
// var startTime = new Date().getTime();
var filter = input.val().toLowerCase();
var li, innertext, old;
var numShown = 0;
var num = "\\s?\\)?\\-?\\(?"
for(i = 0; i<filter.length; i++){
num += filter.substring(i,i+1) + "\\s?\\)?\\-?\\(?";
}
for (var i = 0; i < len; i++) {
li = lis[i];
innertext = !options.selector ?
(li.textContent || li.innertext || "") :
$(li).find(options.selector).text();
li.innerHTML = li.innerHTML.replace(/<span style\=\"background-color\: \#E66A57\">/g ,"").replace(/\<\/span \>/);
if (innertext.match(RegExp(num))) {
li.innerHTML = li.innerHTML.replace(innertext.match(RegExp(num)), "<span style\=\"background-color: #E66A57\">" + innertext.match(RegExp(num)) + "</span c>");
if (li.style.display == "none") {
li.style.display = oldDisplay;
}
numShown++;
} else {
if (li.style.display != "none") {
li.style.display = "none";
}
}
}
callback(numShown);
// var endTime = new Date().getTime();
// console.log('Search for ' + filter + ' took: ' + (endTime - startTime) + ' (' + numShown + ' results)');
return false;
}).keydown(function() {
clearTimeout(keyTimeout);
keyTimeout = setTimeout(function() {
if( input.val() === lastFilter ) return;
lastFilter = input.val();
input.change();
}, timeout);
});
return this; // maintain jQuery chainability
}
$(document).ready(function(){
$('#list').fastLiveFilter("#aza");
$("#aza li div").click(function(){alert("lol");});
$("#aza li span").click(function(){alert("alalalala");});
});
</script>
</head>
<body>
<input id="list">
<ul id="aza">
<li><div>899999999</div><span>gggggg</span></li>
<li><div>877777777</div></li>
<li><div>866666666</div></li>
<li>855555555</li>
</ul>
</body>
</html>