Поиск разделов, содержащих указанный текст

Я хочу сделать функцию поиска на моем сайте, где я ищу divs (и не оставляю divs, которые не соответствуют тому, что я искал. Список div выглядит так:Поиск разделов, содержащих указанный текст

<body> 
<div class='subjects'> 
    <div id='subject'>soccer</div> 
    <div id='subject'>dancing</div> 
    <div id='subject'>soap</div> 
</div> 
</body>

например, когда я искать «с» он не показывает DIV, который танцующий внутри и когда вы пишете «СОА» он показывает только мыло (не снимая дивы не совпадающие, просто не показать их).

У меня действительно нет опыта поиска предметов, поэтому вся информация приветствуется.

пс. те метки, которые я добавил, являются языками, которые доступны, если мне нужно расширение: это не проблема.

источник

2013-09-29 PMint

id = 'subject' 3 место измените их на класс :) – Anobik

У вас не может быть несколько экземпляров идентификатора. – Popsyjunior

Вы можете использовать jQuery, чтобы это сделать, что-то вроде этого:

HTML:

<div class='subjects'> 
    <div>soccer</div> 
    <div>dancing</div> 
    <div>soap</div> 
</div> 

<input type="text" id='search' />

JQuery:

$('#search').on('input', function(){ 
    var text = $(this).val(); 
    $('.subjects div').show();  
    $('.subjects div:not(:contains(' + text + '))').hide(); 
});

Fiddle

источник

2013-09-29 13:31:19 Tomzan

Также проверьте это смешное aproach http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html –

Он по-прежнему использует js в этой ссылке, поэтому заголовок: «Полнотекстовый поиск на стороне клиента в CSS» может быть ошибкой .. – Tomzan

Yea. Это еще один смешной подход. :) –

В POJS и только забота о современных браузеров (поддерживающих ECMA5 & HTML5, IE10 +)

CSS

.hide { 
    display: none; 
}

HTML

<input id="search"></input> 
<div class="subjects"> 
    <div class="subject">soccer</div> 
    <div class="subject">dancing</div> 
    <div class="subject">soap</div> 
</div>

Javascript

document.getElementById("search").addEventListener("keyup", function (evt) { 
    [].forEach.call(document.querySelectorAll(".subjects .subject"), function (subject) { 
     if (subject.textContent.indexOf(evt.target.value) === -1) { 
      subject.classList.add("hide"); 
     } else { 
      subject.classList.remove("hide"); 
     } 
    }); 
}, false);

jsfiddle

В POJS и кросс-браузер требуется (IE5.5 +)

Javascript

function walkTheDOM(node, func) { 
    func(node); 
    node = node.firstChild; 
    while (node) { 
     walkTheDOM(node, func); 
     node = node.nextSibling; 
    } 
} 

function classNameToArray(className) { 
    return className.split(/ +/); 
} 

function getElementsByClassName(node, className) { 
    var array = [], 
     elements = node.getElementsByTagName("*"), 
     elementsLength = elements.length, 
     i = 0, 
     element, 
     classNames, 
     classNamesLength, 
     x; 

    while (i < elementsLength) { 
     element = elements[i]; 
     classNames = classNameToArray(element.className); 
     for (x = 0, classNamesLength = classNames.length; x < classNamesLength; x += 1) { 
      if (classNames[x] === className) { 
       array.push(element); 
       break; 
      } 
     } 

     i += 1; 
    } 

    return array; 
} 

document.getElementById("search").onkeyup = function (evt) { 
    var e = evt || window.event, 
     target = e.target || e.srcElement, 
     subjects = getElementsByClassName(document, "subjects"), 
     subject = [], 
     classnames, 
     classNamesLength, 
     classIndex, 
     element, 
     length, 
     index, 
     text; 

    for (index = 0, length = subjects.length; index < length; index += 1) { 
     subject = subject.concat(getElementsByClassName(subjects[index], "subject")); 
    } 

    for (index = 0, length = subject.length; index < length; index += 1) { 
     text = ""; 
     element = subject[index]; 
     walkTheDOM(element, function (currentNode) { 
      if (currentNode.nodeType === 3) { 
       text += currentNode.nodeValue; 
      } 
     }); 

     classNames = classNameToArray(element.className); 
     for (classIndex = classNames.length - 1; classIndex >= 0; classIndex -= 1) { 
      if (classNames[classIndex] === "hide") { 
       classNames.splice(classIndex, 1); 
      } 
     } 

     if (text.indexOf(target.value) === -1) { 
      classNames.push("hide"); 
     } 

     element.className = classNames.join(" "); 
    } 
};

jsfiddle

Или в JQuery (IE6 + или IE9 + зависит от JQuery версии)

javascript

$("#search").keyup(function (evt) { 
    var subject = $(".subjects .subject"); 

    subject.removeClass("hide"); 
    subject.each(function (index, element) { 
     var $element = $(element); 

     if ($element.text().indexOf(evt.target.value) === -1) { 
      $element.addClass("hide"); 
     } 
    }); 
});

jsfiddle

Все эти примеры используют CSS, чтобы стилизовать дивы, так что очень легко изменить свой стиль, если вы не хотите, чтобы просто показать/скрыть, но, возможно, выделить или поместить границу.

источник

2013-09-29 13:47:42 Xotic750

Вы должны удалить «display: none;», как набрав что-то, и удалить его после того, как вы увидите все из них (и я хочу показать все из них в целом). – PMint

Это просто примеры, которые вы можете изменить в соответствии с вашим проектом, ваши особенности не были ясны для меня из вашего вопроса. – Xotic750

Я обновил вашу уточненную спецификацию. – Xotic750

Поиск разделов, содержащих указанный текст

ответ

Смежные вопросы