Форум

yura29 · #1 (**permalink**) 24.06.2014, 11:54

Привет форумчане

Снова к вам за помощью))
У меня есть страница со списком и инпут фильтра, который скрывает несовпадающие элементы списка
Трудно представить как я уже промучался с этим долбаным плагином фильтра, но менять его не хочется(слишком много времени потратил на него)
Проблема в том, что элементы списка должны быть кликабельны, и всё работает нормально, до того как начал вводить что-нибудь в фильтр
Видимо, этот говнюк что-то делает с кодом, что он уже не подходит под селектор клика
Вобщем, после ввода значения в фильтр элементы списка становятся некликабельными. В консоли хрома ошибок нет и я даже не могу понять что надо делать и куда идти
Заметил только, что если убрать из скрипта код подкрашивания совпадающей части(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>

рони · #2 (**permalink**) 24.06.2014, 12:29

yura29,
если у вас в строке 54 идёт перезапись innerHTML зачем ставить клик на то что уничтожается!!!

$("#aza").on("click", "div", function(){alert("lol");});
	$("#aza").on("click", "span", function(){alert("alalalala");});

на всякий случай если клик по спану нужен индивидуальный -- отмените всплытие иначе сработает и клик на див внутри которого спан .

рони · #3 (**permalink**) 24.06.2014, 12:34

yura29,
в 54 строке

Сообщение от yura29

"</span c>");

yura29 · #4 (**permalink**) 24.06.2014, 12:37

Сообщение от рони

yura29,
если у вас в строке 54 идёт перезапись innerHTML зачем ставить клик на то что уничтожается!!!

$("#aza").on("click", "div", function(){alert("lol");});
	$("#aza").on("click", "span", function(){alert("alalalala");});

на всякий случай если клик по спану нужен индивидуальный -- отмените всплытие иначе сработает и клик на див внутри которого спан .

Спасибо
Думал, что иннер не уничтожает, а просто редактирует
Ваш код помог, но почему-то теперь клик работает только после снятия фокуса с инпута, то есть почему-то нужен дабл клик

рони · #5 (**permalink**) 24.06.2014, 12:44

yura29,
фокус на инпуте - первый клик переключение фокуса на див

yura29 · #6 (**permalink**) 24.06.2014, 12:48

рони,
Не знал, что фокус можно переключить на див
Так получается клик должен и переключить фокус, и потом уже функцию вызывать?

Да и раньше, когда был просто li без дивов и спанов, все работало с одного клика
А фокус с инпута нужно снять один раз после каждого редактирования, потом если просто поставить на него фокус, но не менять значение все работает по одному клику

рони · #7 (**permalink**) 24.06.2014, 12:51

yura29, убрал немного лишнего из плагина - сейчас клик по диву должен сразу срабатывать

<!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() {};



	// 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.on("input",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;
	})
	return this; // maintain jQuery chainability
}

$(document).ready(function(){
	$('#list').fastLiveFilter("#aza");
    $("#aza").on("click", "div", function(){alert("lol");});
   //	$("#aza").on("click", "span", 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>

yura29 · #8 (**permalink**) 24.06.2014, 12:55

рони,
Да, все работает с одного раза
Благодарю
Теперь буду смотреть изменения и вникать))

рони · #9 (**permalink**) 24.06.2014, 13:01

yura29,
у плагина недочёт нельзя использовать background-color: #E66A57
надо просто span
и в сss #aza span{нужные параметры подсветки}

рони · #10 (**permalink**) 24.06.2014, 13:08

yura29,

<!DOCTYPE HTML>

<html>

<head>
  <title>Title</title>
  <meta charset="utf-8">
  <style type="text/css">
  #aza span{background-color: #E66A57;}
  </style>
  <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() {};



	// 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.on("input",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>/g ,"").replace(/<\/span>/g,"");
			if (innertext.match(RegExp(num))) {
				li.innerHTML = li.innerHTML.replace(innertext.match(RegExp(num)), "<span>" + innertext.match(RegExp(num)) + "</span>");
				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;
	})
	return this; // maintain jQuery chainability
}

$(document).ready(function(){
	$('#list').fastLiveFilter("#aza");
    $("#aza").on("click", "div", function(){alert("lol");});
});
</script>
</head>

<body>
	<input id="list">
	<ul id="aza">
		<li><div>899999999</div></li>
		<li><div>877777777</div></li>
		<li><div>866666666</div></li>
		<li>855555555</li>
	</ul>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript