Организация поиска по странице

Web
#1

Я начал делать систему поиска по странице поиск должен производиться по ключевым словам если токовых нет то по ключевым буквам. Эта система для меня оказалась слишком сложной по знаниям которыми я обладаю в JavaScript. С низу строка поиска кнопка поиска и объекты которые обозначены классами поиска. Вопросы которые побудили создать меня это тему будут в конце темы.

<div class="con" style="background: #FFFFFF">
    <input class="tt" type="search" style="border: 1px solid #FFFFFF;outline: 0;outline-offset: 0; position: absolute; width: 1000px; height: 50px; right: 0px; top: 50px; background: #2A2A2A; border-style:hidden;font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 20px;line-height: 24px;color: #FFFFFF; padding: 10px" id="searchtext">
        <div class="tt" style="left: 0px; top: 50px; background: #2A2A2A; width: 40px; height: 50px">
            <img src="img/Union.png" style="position: absolute; top: 15px; left: 15px">
        </div>
        <button class="tt" style="position: absolute; top: 50px; right: 0px; width: 100px; height: 50px; background: #008AC1; border: 0px; cursor: pointer" type="submit" onclick="search()">
            <h2 style="position: absolute; top: 14px; left: 19px">Поиск</h2>
        </button>
        <div class="ananas" style="position: absolute; top: 150px; left: 0px; width: 1040px; height: 550px; background: #2A2A2A">
            <h1 style="position: absolute; top: 20px; left: 30px">Ананас</h1>
        </div>
        <div class="yabloko" style="position: absolute; top: 800px; left: 0px; width: 1040px; height: 550px; background: #2A2A2A">
            <h1 style="position: absolute; top: 20px; left: 30px">Яблоко</h1>
        </div>
        <div class="arbuz" style="position: absolute; top: 1450px; left: 0px; width: 1040px; height: 550px; background: #2A2A2A">
            <h1 style="position: absolute; top: 20px; left: 30px">Арбуз</h1>
        </div>
</div>

В JavaScript я сделал прокрутку страницы до элементов содержащих нужное слово. Эта системе непрактична при опечатках, а при вводе предложений вообще не будет работать.

function search() {
    var searchtext = document.getElementById("searchtext").value
    if (searchtext == "Ананас") searchananas()
    else {
        if (searchtext == "Яблоко") searchyabloko()
        else {
            if (searchtext == "Арбуз") searcharbuz()
        }
    }
}

Пролистывание страницы:

function searchananas() {window.scrollBy(0,150)}
function searchyabloko() {window.scrollBy(0,800)}
function searcharbuz() {window.scrollBy(0,1450)}

Вопросы

  1. Мне нужен способ поиска по ключевым символам и словам, а не сравнивание переменной. То есть подскажите есть ли такая функция в JavaScript?

  2. Вывод возможных подсказок поискового запроса. Эта тема достаточно сложная поэтому буду рад если у вас найдутся примеры и материалы на эту тему.

Я знаю что есть более совершенные способы над которыми я работаю. Но без решения этих проблем в долгосрочной перспективе система просто не будет функционировать в принципе.

#2

Так обычно поиск на сервере происходит, а JS только для вывода/управления результата (если что-то сложное).

Выглядит, что это всё не нужно, а нужно просто padding/margin :thinking:

Тут даже поиск и JS не нужны если их не 100500, список ссылок и href="#myId".

Непонятно что именно надо.
Можно сделать Map (или просто объект в старом JS), где ключ – слово, значение – ID элемента.
.trim(), .toLowerCase() для нормализации.

Но вообще продвинутый поиск это обычно хотя бы что-то такое: Introduction to Information Retrieval
Я в вузе читал эту книгу и делал что-то такое на Питоне )
GitHub - AlexP11223/search: Simple document search (boolean retrieval or TF-IDF) in Python

1 лайк
#3

У меня возникла одна трудность. Этот фрагмент кода не даёт запуститься функции. Какая там ошибка?

var st1 = searchtex.toLowerCase()
var searchtex = st1.totrim()

А так я немного улучшил систему. А именно сделал id с помощью map. И алёрт который будет всплывать при отсутствии вариантов.

function search() {
    var searchtext = document.getElementById("searchtext").value
    var request = map1.get(st1)
    
    if (request == 1) s1()
    else {
        if (request == 2) s2()
        else {
            if (request == 3) s3()
            else {
            alert ('По вашему запросу ничего не найдено!')
            }  
        }
    }
}
map1.set('ананас', 1)
map1.set('яблоко', 2)
map1.set('арбуз', 3)
Интересности
#4

Так а что в консоли выдает?

#5

Uncaught ReferenceError: searchtex is not defined
at search (script.js:8:15)**
at HTMLButtonElement.onclick (index.html:47:194)

#6

ну там странное что-то, в первой строке обращение к созданной во второй строке переменной.

а толку от мапа если иф на каждый?
Я имел в виду хранить в мапе id (или селектор) элемента и например Element.scrollIntoView() - Web APIs | MDN