Как правильно написать поиск по словам или группе слов в строке?

Question

[FrelFrloich]

Прочитав по утру, принял критику ниже и согласен, проблема не понятна и сам вопрос, мягко скажем был неадекватен.
Моя проблема заключается, я хочу сделать поиск по словам, вне зависимости от их положения в строке.

Пример строк :
1. Далеко-далеко за словесными горами
2. Далеко-далеко за словесными лесам

Хотелось бы при вводе далеко горами выдавало первую строку, что во втором примере приведённого ниже осуществляется, но я не могу допетрить, как сделать при непрерывном вводе отображение содержащую ведёный текст строку "как в первом примере, хотя работает он не совсем корректно" . В данный момент прыгает, из за того что я ввожу в массив слово до пробела и потом сравниваю в фильтре, если этот массив не 0 то отображаем, в общем как избежать скачка при добавлении в массив и фильтрации в голову не лезет.

Первый вариант
https://jsfiddle.net/mzstrxdf

Второй вариант (как пример)
https://jsfiddle.net/67qwbrnf/1/

Comments

[GrayHorse]

https://github.com/bvaughn/js-search

[FrelFrloich]

GrayHorse, вся идея понять самому, а не подсматривать в готовые решения)

Answer 1

[Алексей Дубровин]

Если как я понял(Скрытие и показ элементов которые уже есть на странице*)
Если ничего не нашли можно как вы используя флаг true/false.

let searchResult = document.querySelectorAll('.item-search'); // Все элементы
document.querySelector('.input-search').addEventListener('input',function(){
//обработчик на событие ввода
let inputVal = this.value;
	if(!inputVal){
  // Если пусто показываем всё.
  }
	searchResult.forEach(item=>{
//Приводим к нижнему регистру и ищем подстроку
  	if(item.innerHTML.toLowerCase().indexOf(inputVal.toLowerCase()) != -1){
  		item.style.display = "block";
    
  	}else{
    	item.style.display = "none";
    }
  })
});

Comments

[Алексей Дубровин]

FrelFrloich,
Что? Я ничего не понимаю.
Как вы собрались проверять орфографию?
Вы же понимаете что для компьютера нет такого понятия.
Для него строка это символы в определённом порядке.

символам приоброзованны в слова

Кто их будет преобразовывать ? Компьютер? Для него нет такого понятие как слово.
У него есть строки - ссылка в области памяти на последовательность символов.
Символ - ссылка на существующее, кем-то описанное значение в определённой кодировке.
То что вы пытаетесь сделать это называется умный поиск.
Самый ближайший хороший аналог этого поиска это поисковик. И для его реализации используются совсем другие методы.
1) База данных в которой храняться хеш таблицы. (Чтобы сделать "Слова" понятным для компьютера)
2) Алгоритмы поиска по этим хеш таблицам.

Минимально что нужно сделать.
1) Разбить строку на слова.
2) Определить ключевые слова.
3) Выбрать важность этих слов.
4) Создать возможные ошибки, Да для того чтобы проверить что слово не правильно нужно знать как будет не правильно))
6) Ассоциативные бд что если в слове ошибка на букве "о"(мб это имелась буква "а")
5).....

[Алексей Дубровин]

FrelFrloich, 40% вопросов на этом сервисе задаються с учётом что человек (сам не знает чего хочет/решает задачу окольным путём/Вообще не понимает что нужно).
В этом варианте вы или:
1) Не понимаете как устроен поиск
2) Хотите реализовать совершенно другое.

[FrelFrloich]

Доброе утро Алексей, я извиняюсь, вы правы вопрос крайне не понятен, я его перефразировал и убрал лишнее, без чего могу обойтись.

[Алексей Дубровин]

FrelFrloich,
В крациях можно это всё сделать раза в 2 проще. через цикл в цикле(forEach).
Но, я хотел тренироваться с reduce и тд. Надеюсь не умрёте. Если что спрашивайте.
В крациях я просто спличу строку и фильтрую по каждому слову. Это единственная идея которая пришла в голову. Ссылка

let htmlItems = Array.from(document.querySelectorAll(".item-search"));
		document
			.querySelector(".input-search")
			.addEventListener("input", function () {
				let inputValue = this.value.toLowerCase();
				if (!inputValue) {
					//Показываем все поля
				}

				if (inputValue.indexOf(" ") != -1) {
					let arFindWord = inputValue.split(" ");
					let resultSearch = arFindWord.reduce(
						(acc, item) => {
							return acc.filter((htmlItem) => {
								if (htmlItem.innerHTML.toLowerCase().indexOf(item) != -1) {
									return htmlItem;
								}
							});
						},
						[...htmlItems]
					);
					htmlItems.forEach((item) => {
						item.style.display = "none";
					});
					resultSearch.forEach((item) => {
						item.style.display = "block";
					});
				} else {
					htmlItems.forEach((item) => {
						if (item.innerHTML.toLowerCase().indexOf(inputValue) != -1) {
							item.style.display = "block";
						} else {
							item.style.display = "none";
						}
					});
				}
			});

[FrelFrloich]

Алексей Дубровин, по поводу орфографии я имел ввиду псевдо естественно, по типу, если в строке нашли слово и в слове больше 5 букв и в нем сходятся более 4 символов, показываем строку, это нам бы дало +- 1 ошибку, человек вместо "и е" поставил и т.п. правда это чревато, но торкнуло меня именно на этой по началу.

Бог бы с ним, ваш пример подходит, завтра изучу поутру, поставил решённым.