1 Тема від darsteba

  • darsteba
  • Користувач
  • Поза форумом
  • Дата реєстрації: 23.05.2018
  • Повідомлень: 90
    • Репутація: 3

Тема: Як зробити пошук на сайті?

Роблю просту онлайн бібліотеку,хочу додати пошук.
При розробці використовую html/css/js.
Форму для пошуку зробив,але не можу знайти інформацію,як зробити щоб вона працювала.

В мене є декілька файлів ХХХ.html-це оформлення із зображеннями,один з них-це сторінка з назвами книг.При натисканні на підручник,він  відкривається в .pdf форматі.
Хочу щоб при вводі та натисканні  по іконці пошуку мені видавало ту книгу або перекидало на неї (Типу Ctrl+F).

Шукав в Google,але максимум-це просте оформлення пошукового вікна.

Сподіваюсь на вашу допомогу.

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

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

Re: Як зробити пошук на сайті?

це з сервером, чи без сервера? покажіть код
алгоритм простий - спочатку треба мати список усіх книг, а потім просто пройтись по ним, і перевірити, чи текст в полі введення схожий на назву книги. Можете юзати includes

const book = "Як садити буряк";
const search = "буряк";
book.includes(search); // буде true
Подякували: dossed1

3 Відповідь від darsteba Востаннє редагувалося darsteba (20.01.2021 22:51:39)

  • darsteba
  • Користувач
  • Поза форумом
  • Дата реєстрації: 23.05.2018
  • Повідомлень: 90
    • Репутація: 3

Re: Як зробити пошук на сайті?

FakiNyan написав:

це з сервером, чи без сервера? покажіть код
алгоритм простий - спочатку треба мати список усіх книг, а потім просто пройтись по ним, і перевірити, чи текст в полі введення схожий на назву книги. Можете юзати includes

const book = "Як садити буряк";
const search = "буряк";
book.includes(search); // буде true

Це код файлу,де я хочу робити пошук.
Без сервера,просто html файли в папці

<!DOCTYPE html>
<html lang="uk"> 
<head>
    <title>Бібліотека</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="- університет">
    <meta name="author" content="---">    
    <link rel="shortcut icon" href="images/logo.png"> 
    
    <!-- FontAwesome CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
    <!-- Theme CSS -->
    <link rel="stylesheet" href="css/style.css">

</head> 

<body>
    
    <header class="header text-center">        
        <a class="site-title pt-lg-4 mb-0" href="index.html">Бібліотека</a>
        
        <nav class="navbar navbar-expand-lg navbar-dark" >
           
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>

            <div id="navigation" class="collapse navbar-collapse flex-column" >
                <img class="mb-3 mx-auto logo" src="images/logo.png" alt="logo" >            
                
                <ul class="navbar-nav flex-column text-sm-center text-md-left">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html"><i class="fas fa-home fa-fw mr-2"></i>Домашня сторінка <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="post.html"><i class="fas fa-file-alt fa-fw mr-2"></i>Про університет</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="page.html"><i class="fas fa-file-image fa-fw mr-2"></i>Про розробника сайту</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="archive.html"><i class="fas fa-archive fa-fw mr-2"></i>Архів книжок</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-primary" href="https://www.facebook.com/messages/t/100023929352296 "><i class="fas fa-envelope fa-fw mr-2"></i>Напишіть нам</a>
                    </li>
                </ul>
                <hr>
                <ul class="social-list list-inline py-3 mx-auto">                    
                    <li class="list-inline-item"><a href="---"><i class="fab fa-facebook-f"></i></a></li>
                    <li class="list-inline-item"><a href="---"><i class="fab fa-github-alt fa-fw"></i></a></li>
                    <li class="list-inline-item"><a href="---"><i class="fab fa-google-plus-g"></i></a></li>
                    <li class="list-inline-item"><a href="---"><i class="fab fa-instagram"></i></a></li>
                </ul>

            </div>
        </nav>
    </header>
    
    <div class="main-wrapper">
        <header class="page-title theme-bg-light text-center gradient py-5">
            <h1 class="heading">Blog Posts</h1>
        </header>
        <head>
    <meta charset="UTF-8">
    <title>Search box</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
    <div class="search-box">
        <input type="text" class="search-txt" placeholder="Пошук">
        <a href="#" class="search-btn"><i class="fa fa-search" aria-hidden="true"></i></a>
    </div>

</body>
        <section class="content px-3 py-5 p-md-5">
            <div class="container">
                <div class="post mb-5">
                    <div class="media">
                        <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="images/thumbs/1.jpg" alt="image">
                        <div class="media-body">
                            <h3 class="title mb-1"><a href="post.html">Why Every Developer Should Have A Blog</a></h3>
                            <div class="meta mb-1"><span class="date">Published 2 days ago</span><span class="time">5 min read</span><span class="comment"><a href="#">8 comments</a></span></div>
                            <div class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies...</div>
                            <a class="more-link" href="post.html">Read more &rarr;</a>
                        </div><!--//media-body-->
                    </div><!--//media-->
                </div>
                <div class="post mb-5">
                    <div class="media">
                        <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="images/thumbs/2.jpg" alt="image">
                        <div class="media-body">
                            <h3 class="title mb-1"><a href="post.html">A Guide to Becoming a Full-Stack Developer</a></h3>
                            <div class="meta mb-1"><span class="date">Published 3 months ago</span><span class="time">3 min read</span><span class="comment"><a href="#">26 comments</a></span></div>
                            <div class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies...</div>
                            <a class="more-link" href="post.html">Read more &rarr;</a>
                        </div><!--//media-body-->
                    </div><!--//media-->
                </div>
                
                <div class="post mb-5">
                    <div class="media">
                        <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="images/thumbs/3.jpg" alt="image">
                        <div class="media-body">
                            <h3 class="title mb-1"><a href="post.html">High Performance JavaScript</a></h3>
                            <div class="meta mb-1"><span class="date">Published 1 month ago</span><span class="time">8 min read</span><span class="comment"><a href="#">12 comments</a></span></div>
                            <div class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies...</div>
                            <a class="more-link" href="post.html">Read more &rarr;</a>
                        </div><!--//media-body-->
                    </div><!--//media-->
                </div>
                <div class="post mb-5">
                    <div class="media">
                        <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="images/thumbs/4.jpg" alt="image">
                        <div class="media-body">
                            <h3 class="title mb-1"><a href="post.html">Top 5 JavaScript Frameworks</a></h3>
                            <div class="meta mb-1"><span class="date">Published 2 months ago</span><span class="time">15 min read</span><span class="comment"><a href="#">3 comments</a></span></div>
                            <div class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies...</div>
                            <a class="more-link" href="post.html">Read more &rarr;</a>
                        </div><!--//media-body-->
                    </div><!--//media-->
                </div>
                
                <div class="post mb-5">
                    <div class="media">
                        <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="images/thumbs/5.jpg" alt="image">
                        <div class="media-body">
                            <h3 class="title mb-1"><a href="post.html">Learn React in 24 Hours</a></h3>
                            <div class="meta mb-1"><span class="date">Published 2 months ago</span><span class="time">10 min read</span><span class="comment"><a href="#">23 comments</a></span></div>
                            <div class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies...</div>
                            <a class="more-link" href="post.html">Read more &rarr;</a>
                        </div><!--//media-body-->
                    </div><!--//media-->
                </div>
                
                <div class="post">
                    <div class="media">
                        <img class="mr-3 img-fluid post-thumb d-none d-md-flex" src="images/thumbs/6.jpg" alt="image">
                        <div class="media-body">
                            <h3 class="title mb-1"><a href="post.html">About Remote Working</a></h3>
                            <div class="meta mb-1"><span class="date">Published 3 months ago</span><span class="time">2 min read</span><span class="comment"><a href="#">1 comment</a></span></div>
                            <div class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies...</div>
                            <a class="more-link" href="post.html">Read more &rarr;</a>
                        </div><!--//media-body-->
                    </div><!--//media-->
                </div>
                
                <nav class="blog-nav nav nav-justified my-5">
                  <a class="nav-link-prev nav-item nav-link d-none rounded-left" href="#">Previous<i class="arrow-prev fas fa-long-arrow-alt-left"></i></a>
                  <a class="nav-link-next nav-item nav-link rounded" href="post.html">Next<i class="arrow-next fas fa-long-arrow-alt-right"></i></a>
                </nav>
                
            </div>
        </section>
        
        <footer class="footer text-center py-2 theme-bg-dark">
           
            <p class="copyright"><a href="-">text</a></p>
           
        </footer>
    
    </div><!--//main-wrapper-->
    
    
    <!-- Bootstrap Javascript -->          
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>

</body>
</html>

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

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

Re: Як зробити пошук на сайті?

▼Прихований текст

оце бляха шо таке курво!!!

placeholder="Поиск"

ну то як я і казав, тре визначити масив з назвами книжок (вручну), бо це ж в браузері виконується, воно не може мати доступ до директорії в вашій файловій системі

Подякували: ch0r_t1

5 Відповідь від darsteba Востаннє редагувалося darsteba (20.01.2021 23:02:53)

  • darsteba
  • Користувач
  • Поза форумом
  • Дата реєстрації: 23.05.2018
  • Повідомлень: 90
    • Репутація: 3

Re: Як зробити пошук на сайті?

FakiNyan написав:
▼Прихований текст

оце бляха шо таке курво!!!

placeholder="Поиск"

ну то як я і казав, тре визначити масив з назвами книжок (вручну), бо це ж в браузері виконується, воно не може мати доступ до директорії в вашій файловій системі

Пардон за рос. недодовився.

Тобто треба зробити так? : 

const book = "Книга про одне";
const search = "книга";
const book = "Книга про друге";
const search = "друге";
const book = "Книга про третє";
const search = "третє";
book.includes(search);

Тобто додати назви книг  і пов'язані з ними словами,
зробити це в js,а потім підключити цей скрипт до файлу HTML?

Вибачаюсь,якщо питання дурне,я просто до цього моменту робив хіба один сайт,на 1стр,з HTML/CSS,а зараз намагаюсь розібратись з іншими пунктами,але,як бачите,тугенько йде.

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

  • darsteba
  • Користувач
  • Поза форумом
  • Дата реєстрації: 23.05.2018
  • Повідомлень: 90
    • Репутація: 3

Re: Як зробити пошук на сайті?

Дякую за допомогу,зробив інакше,але працює)