Проект: собственный поиск по странице на jQuery

Проект: собственный поиск по странице на jQuery

Потому что почему бы и нет.

Недавно мы говорили о библиотеках и фреймворках — и обещали, что попробуем что-нибудь на них собрать. Настало время.

Сегодня мы возьмём популярную библиотеку jQuery и сделаем на её основе поиск по странице. Браузеры это умеют делать встроенными инструментами, но с помощью нашего метода можно будет более тонко всё настроить и сделать поле поиска видимым и удобным.

Нам понадобятся:

  • библиотека jQuery — она обеспечит работу нашего поискового плагина, потому что плагин сделан тоже для jQuery.
  • плагин highlight — поможет нам найти нужные слова в тексте и подсветить их приятным цветом (каким захотим)
  • поле ввода и кнопка — отвечают за сам интерфейс поиска.

Общая идея

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

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение о том, что таких слов в тексте нет.

Готовим каркас

Сделаем как обычно — возьмём наш стандартный шаблон из предыдущих задач и немного поправим описания разделов. Сохраним его как .html-файл и открывать в браузере пока не будем — всё равно мы ничего не увидим на странице, кроме названия вкладки.

<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Поиск на странице</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
  </style>
  <!-- закрываем служебную часть страницы -->
</head>
<!-- началось содержимое страницы -->

<body>
  <!-- пишем скрипт, который поможет нам с поиском -->
  <script>
  </script>
  <!-- Здесь будет текст, в котором нам нужно что-то найти -->
  <!-- закончилось содержимое страницы -->
</body>
<!-- конец всего HTML-документа -->

</html>

Добавляем форму поиска и текст

Наша форма поиска — это поле ввода и кнопка, которая запускает скрипт. Мы не будем сильно настраивать внешний вид формы, при желании вы можете сделать это сами — все нужные знания для этого у вас уже есть. Если что-то забыли — посмотрите, как мы настраивали вид поля ввода в статье про планировщик задач.

Добавим код формы сразу после тега <body>:

<!-- говорим браузеру, что мы хотим разместить форму -->
<form id="search-highlight" method="post" action="#">
  <!-- добавляем текстовое поле ввода, где будем писать наш поисковый запрос -->
  <input type="text" name="term" id="term" />
  <!-- добавляем кнопку, которая запускает поиск -->
  <input type="submit" name="submit" id="submit" value="Найти" />
  <!-- конец формы -->
</form>
<!-- сразу после формы будем писать, сколько совпадений мы нашли -->
<p class="results"></p>
<!-- а в этом блоке разместим наш основной текст -->
<div class="content">
  Сюда вставим наш текст
</div>

Осталось добавить сам текст в блок <div class="content">. Для простоты мы скопируем первые абзацы этой статьи и обернём их в HTML-теги. Вы можете вставить какой угодно текст, на работу скрипта это никак не повлияет.

<h2>Общая идея</h2>

<p>

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

</p>

<p>

Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение, что таких слов в тексте нет.

</p>

Сохраняем, открываем в браузере:

Настраиваем стили

Стили отвечают за внешний вид всех элементов на странице. Главное, что нам нужно сделать, — нормальный внешний вид формы поиска и выбрать подсветку для найденных результатов. Это мы настроим в блоке <style> в начале страницы:

/*поле ввода*/
.searchtext {
  font-size: 16px;
  font-weight: bold;
  height: 27px;
  padding: 0 6px 0;
  width: 250px;
  /*делаем стильную границу вокруг поля*/
  border: 1px solid rgba(0, 0, 0, 0.1);
}
/* выбираем цвет подсветки — светло-зелёный*/
.highlight {
  background: #4cff00;
}
/*кнопка поиска*/
.search-button {
  background-color: #0b2f3f;
  font-weight: bold;
  font-size: 12px;
  /*устанавливаем высоту кнопки*/
  height: 28px;
  margin: 0;
  color: #ffffff;
  padding: 6px;
  /*тоже делаем стильную границу у кнопки*/
  border: 1px solid rgba(0, 0, 0, 0.1);
}

Сохраняем и обновляем страницу — теперь форма выглядит лучше:

Пишем скрипт

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

<!-- подключаем библиотеку jQuery -->
<script src="http://thecode.local/wp-content/uploads/2019/06/jquery.js" type="text/javascript"></script>
<!--подключаем к ней плагин highlight.js -->
<script src='http://thecode.local/wp-content/uploads/2019/06/jqueryhighlight.js' />
</script>
<!-- говорим браузеру, что сейчас начнётся скрипт -->
<script type="text/javascript">
  $(document).ready(function () {
    // обрабатываем нажатие на кнопку
    $("#submit").click(function () {
      // очищаем переменную, в которой будет наш поисковый запрос
      var term = "";
      // и переменную, которая отвечает за количество найденных совпадений
      var n = "0";
      // убираем всю подсветку из прошлого поиска, если она была
      $('body').removeHighlight();
      // скрываем блок с текстом о количестве найденных результатов
      $("p.results").hide().empty();
      // с помощью магии jQuery берём текст из строки поиска и кладём его в переменную term
      term = $('#term').attr('value');
      // если строка поиска пустая — выводим сообщение
      if ($('#term').val() == "") {
        $("p.results").fadeIn().append("Вы ничего не ввели :(");
        return false;
        // иначе, если в строке поиска что-то было…
      } else {
        // в блоке content, где у нас находится весь текст, плагином подсвечиваем все найденные совпадения (если совпадений не будет — не будет и подсветки)
        $('.content').highlight(term);
        // берём количество совпадений
        n = $("span.highlight").length;
        // если совпадений нет — в разделе results пишем, что ничего не нашли
        if (n == 0) {
          $("p.results").fadeIn().append("Ничего такого в тексте нет");
          // иначе в том же разделе пишем число совпадений  
        } else {
          $("p.results").fadeIn().append('Найдено совпадений:' + n);
        }
        return false;
      }
    });
  });

Вставляем скрипт в HTML-файл, сохраняем и смотрим, что получилось в итоге:

А вот как всё будет работать: 

Проект: собственный поиск по странице на jQuery

Общий код страницы

<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Поиск на странице</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*поле ввода*/
    .searchtext {
      font-size: 16px;
      font-weight: bold;
      height: 27px;
      padding: 0 6px 0;
      width: 250px;
      /*делаем стильную границу вокруг поля*/
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* выбираем цвет подсветки — светло-зелёный*/
    .highlight {
      background: #4CFF00;
    }

    /*кнопка поиска*/
    .search-button {
      background-color: #0B2F3F;
      font-weight: bold;
      font-size: 12px;
      /*устанавливаем высоту кнопки*/
      height: 28px;
      margin: 0;
      color: #ffffff;
      padding: 6px;
      /*тоже делаем стильную границу у кнопки*/
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>
<!-- началось содержимое страницы -->

<body>
  <!-- говорим браузеру, что мы хотим разместить форму -->
  <form id="search-highlight" method="post" action="#">
    <!-- добавляем текстовое поле ввода, где будем писать наш поисковый запрос -->
    <input type="text" name="term" id="term" class="searchtext" />
    <!-- добавляем кнопку, которая запускает поиск -->
    <input type="submit" name="submit" id="submit" value="Найти" class="search-button" />
    <!-- конец формы -->
  </form>
  <!-- подключаем библиотеку jQuery -->
  <script src="http://thecode.local/wp-content/uploads/2019/06/jquery.js" type="text/javascript"></script>
  <!-- подключаем к ней плагин highlight.js -->
  <script src='http://thecode.local/wp-content/uploads/2019/06/jqueryhighlight.js' />
  </script>
  <!-- говорим браузеру, что сейчас начнётся скрипт -->
  <script type="text/javascript">
    $(document).ready(function () {
      // обрабатываем нажатие на кнопку
      $("#submit").click(function () {
        // очищаем переменную, в которой будет наш поисковый запрос
        var term = "";
        // и переменную, которая отвечает за количество найденных совпадений
        var n = "0";
        // убираем всю подсветку из прошлого поиска, если она была
        $('body').removeHighlight();
        // скрываем блок с текстом о количестве найденных результатов
        $("p.results").hide().empty();
        // с помощью магии jQuery берём текст из строки поиска и кладём его в переменную term
        term = $('#term').attr('value');
        // если строка поиска пустая — выводим сообщение
        if ($('#term').val() == "") {
          $("p.results").fadeIn().append("Вы ничего не ввели :(");
          return false;
          // иначе, если в строке поиска что-то было…
        } else {
          // в блоке content, где у нас находится весь текст, плагином подсвечиваем все найденные совпадения (если совпадений не будет — не будет и подсветки)
          $('.content').highlight(term);
          // берём количество совпадений
          n = $("span.highlight").length;
          // если совпадений нет — в разделе results пишем, что ничего не нашли
          if (n == 0) {
            $("p.results").fadeIn().append("Ничего такого в тексте нет");
            // иначе в том же разделе пишем число совпадений  
          } else {
            $("p.results").fadeIn().append('Найдено совпадений:' + n);
          }
          return false;
        }
      });
    });
  </script>
  <!-- сразу после формы будем писать, сколько совпадений мы нашли -->
  <p class="results"></p>
  <!-- а в этом блоке разместим наш основной текст -->
  <div class="content">
    <p>
      Чтобы лучше понять, как работают библиотеки и плагины в веб-программировании, давайте с их помощью сделаем удобный
      поиск по странице. Мы знаем, что современные браузеры тоже умеют это делать, но мы сделаем свою версию, которая
      работает не хуже, чем в Хроме или Сафари.
    <p>
    <h2>Общая идея</h2>
    <p>
      У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в
      самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск
      запускает.
    </p>
    <p>
      Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит —
      пишет сообщение о том, что таких слов в тексте нет.
    </p>
  </div>
  <!-- закончилось содержимое страницы -->
</body>
<!-- конец всего HTML-документа -->

</html>

Как можно улучшить

Можно убрать кнопку «Найти» и запускать поиск при вводе текста в поле.

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

Регулярные выражения! О них отдельно напишем, это же просто праздник какой-то.

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Делаем собственный таймер для спорта
Делаем собственный таймер для спорта

Без рекламы и встроенных покупок.

hard
Ваш собственный телеграм-секретарь: делаем вместе
Ваш собственный телеграм-секретарь: делаем вместе

Пошаговая инструкция для тех, кому нужен секретарь.

easy
Что означает ошибка UnboundLocalError: local variable referenced before assignment
Что означает ошибка UnboundLocalError: local variable referenced before assignment

Одна из самых частых ошибок у начинающих в Python.

easy
Как утащить простой сайт за 5 минут
Как утащить простой сайт за 5 минут

Например, чтобы научиться делать так же

easy
Кнопка в виде ЛОДКИ
Кнопка в виде ЛОДКИ

Просто дурь на CSS. Разок можно.

easy
Мегапроект: расшифровщик аудио в текст… через облако Яндекса!

Сегодня мы будем эксплуатировать чужие облака.

hard
Bomberman на JavaScript

Как на старой приставке из детства.

hard
Делаем свой блокировщик любой рекламы за 3 минуты
Делаем свой блокировщик любой рекламы за 3 минуты

Хакерский метод победить рекламодателей.

easy
CSS: как задавать размеры элементов на сайте
CSS: как задавать размеры элементов на сайте

Шпаргалка по единицам измерения для начинающих верстальщиков

easy
Пишем собственный лапшесниматель
Пишем собственный лапшесниматель

Инструмент для защиты ума от пропаганды, контрпропаганды, инфобизнеса и лжепсихологов.

easy
medium