1 Тема від dduckker

  • dduckker
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 04.05.2019
  • Повідомлень: 5
    • Репутація: 0

Тема: Живий пошук з декількома вписаними словами JS

Є такий код живого пошуку. Чи можна зробити так, щоб при вписування декількох слів, наприклад як тут я впишу "машина двір", мені показувалися ті варіанти, в яких є хоч одне слово з вписаних? Тобто щоб перший і другий рядок залишалися, а третя забиралася, ну і навпаки. Вписую "будинок двір" і забирався лише другий рядок, а 1 і 3 залишалася. Допоможіть будь ласка

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
   $(document).ready(function(){
  $(".tabs .tab-2 #container #output").keyup(function(){
    _this = this;
    $.each($(".tabs .tab-2 #recontain a .reslov"), function() {
      if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
        $(this).hide();
      else
        $(this).show();                
    });
  });
 });
</script
<div class="tabs">
  <div class="tab-2">
    <div>
      <div id="container">  
          <input id='output'>
      </div> 
    </div>
  </div>
  <div class="tab-2">
    <div>
      <div id="recontain" class="elastic">
        <a href='#'>
          <div class="reslov">
            <h6 id="reh6">машина, будинок, вулиця, двір</h6>
          </div>
        </a>
        <a href='#'>
          <div class="reslov">            
            <h6 id="reh6">машина, робота, офіс, стіл </h6>
          </div>
        </a>
        <a href='#'>
          <div class="reslov">
            <h6 id="reh6">телефон, будинок, ноутбук, </h6>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Живий пошук з декількома вписаними словами JS

let search = "будинок двір"; // це те, що ми ввели в рядок пошуку
const data = [ // оце наші дані, котрі треба відфільтрувати
    "машина, будинок, вулиця, двір",
  "машина, робота, офіс, стіл",
  "телефон, будинок, ноутбук, "
];

search = search.split(' '); // розбиваємо рядок на слова, пробіл - це те, що розділяє слова
const filteredData = data.filter(line => search.some(word => line.indexOf(word) > -1)); // фільтруємо дані

console.log(filteredData); // показуємо відфільтровані дані в консолі

осьо приклад такого фільтру.

Фільтр працює тако:

1. Для кожного елементу в масиві data (елемент - це просто рядок тексту)
2. Проходимось по кожному слові в масиві search
3. Якщо якесь слово з масиву search знаходиться в поточному рядку, то повертаємо true, і даний рядок залишається. А якщо не знаходимо такого слова  в рядку, то такий рядок відкидається.

3 Відповідь від dduckker

  • dduckker
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 04.05.2019
  • Повідомлень: 5
    • Репутація: 0

Re: Живий пошук з декількома вписаними словами JS

Отже, якщо я захочу додати ще декілька рядків, мені треба буде дотати їх і в js також?

FakiNyan написав:
let search = "будинок двір"; // це те, що ми ввели в рядок пошуку
const data = [ // оце наші дані, котрі треба відфільтрувати
    "машина, будинок, вулиця, двір",
  "машина, робота, офіс, стіл",
  "телефон, будинок, ноутбук, "
];

search = search.split(' '); // розбиваємо рядок на слова, пробіл - це те, що розділяє слова
const filteredData = data.filter(line => search.some(word => line.indexOf(word) > -1)); // фільтруємо дані

console.log(filteredData); // показуємо відфільтровані дані в консолі

осьо приклад такого фільтру.

Фільтр працює тако:

1. Для кожного елементу в масиві data (елемент - це просто рядок тексту)
2. Проходимось по кожному слові в масиві search
3. Якщо якесь слово з масиву search знаходиться в поточному рядку, то повертаємо true, і даний рядок залишається. А якщо не знаходимо такого слова  в рядку, то такий рядок відкидається.

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Живий пошук з декількома вписаними словами JS

ооо, то ви зовсім новачок?
залежить, звідки ви ті рядки хочете брати. Якщо вручну вбиваєте - то додавайте в js.

5 Відповідь від dduckker

  • dduckker
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 04.05.2019
  • Повідомлень: 5
    • Репутація: 0

Re: Живий пошук з декількома вписаними словами JS

Так, новачок. я тут полазив на просторах інтернету, знайшов такий код. Взагалі мені треба, щоб при натисканні на чекбокс воно відразу показовало тільки рядок, в якому є таке слово. А працює тільки при натисканні пробілу після слова
Ось код: https://codepen.io/dduckker/pen/eaYgMV

FakiNyan написав:

ооо, то ви зовсім новачок?
залежить, звідки ви ті рядки хочете брати. Якщо вручну вбиваєте - то додавайте в js.

6 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Живий пошук з декількома вписаними словами JS

це тому що ви кацапський код якийсь знайшли, як глянув на ті коментарі, то ледь не знудило

7 Відповідь від dduckker

  • dduckker
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 04.05.2019
  • Повідомлень: 5
    • Репутація: 0

Re: Живий пошук з декількома вписаними словами JS

FakiNyan написав:

це тому що ви кацапський код якийсь знайшли, як глянув на ті коментарі, то ледь не знудило

а якщо без коментарів?
просто дуже треба це

8 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Живий пошук з декількома вписаними словами JS

перевіряйте
https://jsfiddle.net/sxa9kL5r/

html

<input type="text" class="input-field">
<div>
  <input type="checkbox" class="checkbox" name="car" value="Машина">
  <label for="car">Машина</label>
  
  <input type="checkbox" class="checkbox" name="building" value="Будинок">
  <label for="horns">Будинок</label>
</div>


<ul>
  <li class="item">машина, будинок, вулиця, двір</li>
  <li class="item">машина, робота, офіс, стіл</li>
  <li class="item">телефон, будинок, ноутбук</li>
</ul>

js

const items = [...document.getElementsByClassName('item')];
const checkboxes = [...document.getElementsByClassName('checkbox')];
const field = document.getElementsByClassName('input-field')[0];
let fieldValues = [];

checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click', ({target: {checked, value}}) => {
        if (checked) {
            fieldValues.push(value);
        } else {
            const index = fieldValues.indexOf(value);
            if (index > -1) {
                fieldValues.splice(index, 1);
            }
        }
        field.value = fieldValues.join(' ');
        filter();
    }, false);
});

function filter() {
    items.forEach(item => {
        if (fieldValues.length && !fieldValues.some(
            word => item.innerText.indexOf(word.toLowerCase()) > -1
        )) {
            item.classList.add('hide');
        } else {
            item.classList.remove('hide');
        }
    });
}

css

.hide {
  display: none;
}
Подякували: leofun011

9 Відповідь від dduckker

  • dduckker
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 04.05.2019
  • Повідомлень: 5
    • Репутація: 0

Re: Живий пошук з декількома вписаними словами JS

дуже дякую, як і хотілось:3

FakiNyan написав:

перевіряйте
https://jsfiddle.net/sxa9kL5r/

html

<input type="text" class="input-field">
<div>
  <input type="checkbox" class="checkbox" name="car" value="Машина">
  <label for="car">Машина</label>
  
  <input type="checkbox" class="checkbox" name="building" value="Будинок">
  <label for="horns">Будинок</label>
</div>


<ul>
  <li class="item">машина, будинок, вулиця, двір</li>
  <li class="item">машина, робота, офіс, стіл</li>
  <li class="item">телефон, будинок, ноутбук</li>
</ul>

js

const items = [...document.getElementsByClassName('item')];
const checkboxes = [...document.getElementsByClassName('checkbox')];
const field = document.getElementsByClassName('input-field')[0];
let fieldValues = [];

checkboxes.forEach(checkbox => {
    checkbox.addEventListener('click', ({target: {checked, value}}) => {
        if (checked) {
            fieldValues.push(value);
        } else {
            const index = fieldValues.indexOf(value);
            if (index > -1) {
                fieldValues.splice(index, 1);
            }
        }
        field.value = fieldValues.join(' ');
        filter();
    }, false);
});

function filter() {
    items.forEach(item => {
        if (fieldValues.length && !fieldValues.some(
            word => item.innerText.indexOf(word.toLowerCase()) > -1
        )) {
            item.classList.add('hide');
        } else {
            item.classList.remove('hide');
        }
    });
}

css

.hide {
  display: none;
}