#javascript #jquery
#javascript #jquery
Вопрос:
Я создаю демонстрационную версию поиска товаров, которая фильтрует элементы на основе поисковых слов.
При вводе текстовое поле динамически сопоставляет поисковый запрос с ключевыми словами внутри тегов label. Если все ключевые слова совпадают, родительский div остается видимым. Если ключевые слова отсутствуют, div исчезает.
Я пытаюсь добавить список стоп-слов, чтобы я мог фильтровать общие конструкции фраз. В идеале, они должны вызываться stopword.js или .txt. (это демо и должно работать в автономном режиме)
Причина этого в том, что я хочу, чтобы все поля были видны, когда запрос пуст, и постепенно исчезали, только когда новое ключевое слово не соответствует.
Заранее спасибо за помощь.
Скрипка:https://jsfiddle.net/eqn5h7vk /
Код:
$("#search-input").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the word list
$(".content_boxes div").each(function(){
var pattern = filter.trim().match(/[a-zA-Z] |[0-9] /g) || ""; // null coalescing: "" if null
if(pattern) {
pattern = pattern.map(function(el) {
return '(?=.*' el ')';
});
//join if there is something in the array
pattern = pattern.join("");
}
//console.log(pattern.join(""));
// If the word list does not contain the text phrase, fade it out
if ($(this).text().search(new RegExp(pattern, "i")) < 0) {
$(this).fadeOut("slow");
// Show the product divs if the phrase matches and increase the count by 1
} else {
$(this).show();
count ;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = " count);
});
body {font-family:arial}
input {font-size:20px; border:1px solid #cecece; padding:5px; border-radius:5px; width:300px;}
b {color:blue}
label {display:none}
.content {width:100px; margin:5px; background:#cecece; float: left; border-radius:5px; padding:10px; text-align:center}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search-input" type="text" Placeholder="Search fruit by color">
<p>Boxes will show up if keywords <b>Red</b>, <b>Green</b> or <b>Yellow</b> match the label</p>
<p>Im trying to add a list of stopwords so if you search for <b>"Show me yellow and green fruits"</b>, the keywords <b>show</b>, <b>me</b>, <b>and</b>, <b>fruits</b> are ignored by the search.
<div class="content_boxes">
<div class="content"><label>Red green</label><span>Apple</span></div>
<div class="content"><label>yellow</label><span>Banana</span></div>
<div class="content"><label>Red</label><span>Cherry</span></div>
<div class="content"><label>green red</label><span>Grapes</span></div>
<div class="content"><label>green</label><span>Kiwi</span></div>
<div class="content"><label>yellow</label><span>Lemon</span></div>
<div class="content"><label>green</label><span>Lime</span></div>
<div class="content"><label>green yellow</label><span>Pears</span></div>
<div class="content"><label>Red</label><span>Strawberry</span></div>
<div class="content"><label>red green</label><span>Watermelon</span></div>
Комментарии:
1. что означает «стоп-слово»?
2. Распространенные слова, которые игнорируются при поиске. Подробнее: en.wikipedia.org/wiki/Stop_words