Массив фильтра JavaScript по нескольким строкам

Массив фильтра JavaScript по нескольким строкам

Эта ветка очень помогла мне достичь желаемого результата в поиске, и на основе этого я расширил вышеупомянутое решение для поиска в массиве объектов и в нескольких полях, таких как заголовок, категория или теги.

Я публикую свой ответ с кодом, просто чтобы помочь, если это понадобится любому разработчику. Тем не менее, есть шансы на дальнейшие улучшения, и я надеюсь, что это будет кому-то полезно.

Мое требование было:

  • Чтобы найти слова для поиска в заголовке (строка), категории (строка) или массив тегов (массив строк).
  • Поисковые слова могут быть кратны пробелу, например «Es6 IIFE»
  • Поисковые слова могут быть в любом месте строки в любом порядке.

Я подготовил одно живое демо для того же самого. Вы можете запустить и проверить результат.

У меня есть следующий образец массива объектов с содержит список статей .

 let articles = [ { "title": "ES6 — set, map, weak", "category": "ES6", "tags": ["ES6", "Set", "Map", "Weak"] }, { "title": "JavaScript Modules: From IIFEs to CommonJS to ES6 Modules", "category": "JavaScript", "tags": ["JavaScript", "Modules", "IIFE", "ES6 Modules"] }, { "title": "A guide to JavaScript Regular Expressions", "category": "JavaScript", "tags": ["JavaScript", "RegExp", "Regular Expressions"] }, ]; 

Если какой-либо человек введет «es6 iife» в поле поиска и нажмет кнопку, то сначала он будет просматривать массив тегов, если его там нет, то он будет искать заголовок и категорию.

 let output = document.querySelector('#output'); let articles = [ { "title": "ES6 — set, map, weak", "category": "ES6", "tags": ["ES6", "Set", "Map", "Weak"] }, { "title": "JavaScript Modules: From IIFEs to CommonJS to ES6 Modules", "category": "JavaScript", "tags": ["JavaScript", "Modules", "IIFE", "ES6 Modules"] }, { "title": "A guide to JavaScript Regular Expressions", "category": "JavaScript", "tags": ["JavaScript", "RegExp", "Regular Expressions"] }, ]; let initialContent = ''; articles.map(article ={amp}gt; { initialContent  = `{amp}lt;li{amp}gt; {amp}lt;p{amp}gt;{amp}lt;b{amp}gt;Title : {amp}lt;/b{amp}gt; ${article.title}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{amp}lt;b{amp}gt;Category : {amp}lt;/b{amp}gt; ${article.category}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{amp}lt;b{amp}gt;Tags : {amp}lt;/b{amp}gt; ${article.tags}{amp}lt;/p{amp}gt; {amp}lt;/li{amp}gt;`; }); output.innerHTML = initialContent; function filter() { let searchTerm = document.querySelector('#searchBox').value; let keywords = searchTerm.split(' '); let articleBySearch = []; articles.map((article) ={amp}gt; { let allKeywordsMatch = true; keywords.map((keyword) ={amp}gt; { if (article.tags.some((tag) ={amp}gt; tag.toLowerCase().indexOf(keyword.toLowerCase()) !== -1)) { allKeywordsMatch = true; } else { if (article.title.toLowerCase().indexOf(keyword.toLowerCase()) === -1 {amp}amp;{amp}amp; article.category.toLowerCase().indexOf(keyword.toLowerCase()) === -1) { allKeywordsMatch = false; } } }); if (allKeywordsMatch) articleBySearch.push(article); }); // Display Output in the browser let htmlContent = ''; articleBySearch.map(article ={amp}gt; { htmlContent  = `{amp}lt;li{amp}gt; {amp}lt;p{amp}gt;{amp}lt;b{amp}gt;Title : {amp}lt;/b{amp}gt; ${article.title}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{amp}lt;b{amp}gt;Category : {amp}lt;/b{amp}gt; ${article.category}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{amp}lt;b{amp}gt;Tags : {amp}lt;/b{amp}gt; ${article.tags}{amp}lt;/p{amp}gt; {amp}lt;/li{amp}gt;`; }); output.innerHTML = htmlContent; } 
 body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .example { border: 1px solid rgb(245, 28, 118); width: 400px; margin: 0 auto; padding: 1em; } .example #searchBox { padding: 10px; border: 1px solid #cccccc; } .example #searchBox:focus { padding: 10px; border: 1px solid #0059ff; } .example button { padding: 10px; color: #FFF; background-color: #0059ff; border: 1px solid #0059ff; } .example ul { margin: 0; padding: 0; list-style: none; } .example li { border: 1px solid #cccccc; padding: 1em; margin: 1em 0; } 
 {amp}lt;div class="example"{amp}gt; {amp}lt;input type="text" id="searchBox" placeholder="Type your words to search" /{amp}gt; {amp}lt;button onClick="filter()"{amp}gt;Click to Filter{amp}lt;/button{amp}gt; {amp}lt;ul id="output"{amp}gt;{amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector