LINUX.ORG.RU
решено Форум — Web-development  

Фильтрация элементов.

 


0

1

Предположим, что есть некий список элементов: 

<div class = "parent">
 <div id = "hop-1">Apple</div>
 <div id = "hop-2">Forecast</div>
 <div id = "hop-3">Dishes</div>
 ...
 <div id = "hop-44">Homer</div>
</div>
И пусть «на поле» есть поле ввода для фильтрации. Правильно ли я понял, что для того, чтобы отсеять элементы, у которых в имени содержится то, что я написал надо в onchange написать примерно следующее: 
var EL;
var FIL = document.getElementById('text-filter').value;
var REG = new RegExp('/' + FIL + '/gi');

FIL = FIL.toLowercase();

for (i=1;i<=44;i++)
{
 EL = document.getElementById('hop-' + i);
 if REG.test(EL.innerHTML)
 {
 EL.style.display = block;
 }
 else
 {
 EL.style.display = none;
 }
}

?

★★★

Последнее исправление: AlexCones (всего исправлений: 2)
← Не соображу, как сверстать такой дизайн беcтаблично.
размеры дивов и таблиц в % →

Ага, только надо не забыть заэскэйпить регесп сиволы:

String.prototype.escapeRegExp = function () {
    var text = this;
    var specials = [
        '/', '.', '*', '+', '?', '|',
        '(', ')', '[', ']', '{', '}', '\\'
    ];
    for (var i = 0; i < specials.length; i++) {
        var sym = specials[i];
        text = text.replace(new RegExp('\\' + sym, 'g'), '\\' + sym);
    }
    return text;
};
theos ★★★
()
Ответ на: комментарий от theos

А покажите, пожалуйста, как и где я должен ей воспользоваться.

AlexCones ★★★
() автор топика
Ответ на: комментарий от theos

[code] var REG = new RegExp('/' + FIL + '/gi'); [/code] Вот здесь ты передаешь ввод в конструктор, он может содержать спецсимволы (например точку) и их надо заэскейпить:

[code] var REG = new RegExp('/' + FIL. escapeRegExp() + '/gi'); [/code]

В любом случаи использовать для переменных UPPER_CASE_STYLE очень дурной тон.

theos ★★★
()
Ответ на: комментарий от Kalashnikov

А если осилить jquery то даже циклов писать не придется.

$('div.parent').children().each(function() { reg.test($(this).html()) ? $(this).show() : $(this.hide())) } );
theos ★★★
()
Ответ на: комментарий от Kalashnikov

Пациент не восприимчив.

Ололошеньки

А вообще, там можно и тот самый :contains()

Точно, не сообразил. Просто я всегда использую что-то MVC подобное, поэтому никогда не приходилось матчить содержимое элементов :)

theos ★★★
()
Ответ на: комментарий от anthill

Ага cache придумали трусы. :)

Не просто кэш, а кэш + CDN (Например Google CDN)

theos ★★★
()
Ответ на: комментарий от theos

Сделал вот так:

function MENUSEARCH()
{
 var EL;
 var FIL = document.getElementById('menu-search').value; 
 var REG = FIL.toLowerCase();
 var STR;
 var I;

 for (I = 0; I <= 5; I++)
  document.getElementById('field-' + I).style.display = "none";
 
 document.getElementById('field-5').style.display = "block";

 for (I = 0; I <= 16; I++)
 {
  EL = document.getElementById('app-' + I);
  STR = EL.innerHTML;
  STR = STR.toLowerCase();
  if (STR.indexOf(REG) + 1)
   EL.style.display = "block";
  else
   EL.style.display = "none";
 }
}

Работает. Но так как висит на событии onchange, срабатывает только когда нажать ENTER. Попробовал перевесить на onkeypress, но ведет себя хаотично. Как сделать «живой» поиск?

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

но ведет себя хаотично.

Не хаотично. просто по кейдовн значение инпута еще не изменено

Как сделать «живой» поиск?

Повеситься на keyp. В этом случае значение уже новое им можно пользоваться.

theos ★★★
()
Ответ на: комментарий от theos

Спасибо.Хоть и не совсем так, как хотелось, но лучше, чем каждый раз жмакать enter.

AlexCones ★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Не соображу, как сверстать такой дизайн беcтаблично.
Web-development
размеры дивов и таблиц в % →