Как сделать поиск по странице в Тильде

Не скажу что визуально скрипт простой, но поверьте проще некуда.

Отдаю в добрые руки :)


  1. Создайте Zero блок, задайте ему класс .uc-search, добавьте HTML элемент с содержимым из блока #1
  2. Добавьте T123 и вставьте в него код из блоков 2 и 3

Вот и вся инструкция =)

#1 — Поле поиска для Zero

<div class="searchwrap">
    <input type="text" id="searchInput" placeholder="Введите текст для поиска">
    <button id="clearButton">✖</button>
    <button id="searchButton">Найти</button>
</div>
#2 — Стили

<style>
/* Фиксация Zero с поиском */
.uc-search {
  position: fixed;
  bottom: 0;
  top: auto;
  width: 100%;
  z-index: 999;
}

/* Стили для подсветки текста */
.current {
  border: 0px solid red;
  padding: 2px 5px;
  border-radius: 5px;
  background-color: black !important;
}
.highlight {
  background-color: grey;
  color: white;
  font-weight: 600;
}
/* Стили для формы поиска */
.searchwrap {
  display: flex;
  column-gap: 2%;
}
input#searchInput {
  width: 70%;
  padding: 10px 20px;
  font-family: 'TildaSans';
  font-size: 16px;
  background: #dfe1e8;
  border: none !important;
  border-radius: 10px;
}
#searchButton {
  height: 50px;
  width: 25%;
  background: black;
  border: none;
  border-radius: 10px;
  color: white;
  font-family: 'TildaSans';
  font-size: 16px;
  cursor: pointer;
}
#clearButton {
  position: absolute;
  top: 2px;
  right: 30%;
  left: auto;
  margin-top: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 100;
}
</style>
#3 — Скрипт поиска

<script>
$(document).ready(function() {
  var searchInput = $('#searchInput');
  var searchButton = $('#searchButton');
  var clearButton = $('#clearButton');
  var contentDiv = $('#allrecords');
  var searchTimer;
  var currentMatch = 0;

  function searchAndHighlight() {
    var searchText = searchInput.val().trim();
    contentDiv.removeHighlight();
    if (searchText !== '') {
      var matches = contentDiv.highlight(searchText);
      if (matches.length > 0) {
        currentMatch = 0;
        scrollToMatch(currentMatch);
      } else {currentMatch = -1}
    } else {currentMatch = -1}
  }

  function scrollToMatch(index) {
    var matches = contentDiv.find('.highlight');
    if (index >= 0 && index < matches.length) {
      var match = $(matches[index]);
      $('html, body').animate({
        scrollTop: match.offset().top - 50
      }, 500);
      match.addClass('current');
    }
  }

  searchInput.on('input', function() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(searchAndHighlight, 500);
  });

  searchButton.on('click', function() {
    currentMatch++;
    scrollToMatch(currentMatch);
  });

  clearButton.on('click', function() {
    searchInput.val('').focus();
    contentDiv.removeHighlight();
    currentMatch = -1;
  });
});

(function($) {
  $.fn.highlight = function(pat) {
    function innerHighlight(node, pat) {
      var skip = 0;
      if (node.nodeType === 3) {
        var pos = node.data.toUpperCase().indexOf(pat);
        if (pos >= 0) {
          var spanNode = document.createElement('span');
          spanNode.className = 'highlight';
          var middleBit = node.splitText(pos);
          var endBit = middleBit.splitText(pat.length);
          var middleClone = middleBit.cloneNode(true);
          spanNode.appendChild(middleClone);
          middleBit.parentNode.replaceChild(spanNode, middleBit);
          skip = 1;
        }
      } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
        for (var i = 0; i < node.childNodes.length; ++i) {i += innerHighlight(node.childNodes[i], pat)}
      }
      return skip;
    }
    return this.each(function() {innerHighlight(this, pat.toUpperCase())});
  };

  $.fn.removeHighlight = function() {
    return this.find('span.highlight').each(function() {
      this.parentNode.firstChild.nodeName;
      with (this.parentNode) {
        replaceChild(this.firstChild, this);
        normalize();
      }
    }).end();
  };
})(jQuery);
</script>

A

  • Alignment (выравнивание)
    расположение объектов относительно других объектов. Например слева, справа, по центру и т.п.
  • Adobe Illustrator
    это программа из пакета Adobe, предназначенная для создания и редактирования объектов векторной графики: иконок, логотипов, иллюстраций и пр. Используется в графическом дизайне, веб-дизайне, UX/UI-дизайне. Существуют версии Adobe Illustrator для компьютера и iPad.

B

  • Back End (бэкэнд)
    в вебе, это часть сайта, которая спрятана от глаз обычного пользователя и выполняется на стороне сервера. Применимо к CMS (смотрите ниже), бэкэндом является административная часть системы.
  • Baseline (бейзлайн)
    термин используется относительно типографики – это воображаемая линия, на которой стоят все буквы в строке.
  • Bezier Curve (кривые Безье)
    параметрические кривые, которые представляют векторный путь в компьютерной графике. Зачастую они создаются с помощь Pen Tool, путем соединения точек, которые позволяют изменять форму и направление кривых.

C

  • CMS
    система управления контентом – инструмент, который позволяет управлять сайтом. Обычно, в CMS контент отделён от дизайна и функциональной составляющей сайта, что позволяет легко изменять дизайн и функционал, не затрагивая при этом контент. Позволяет легко создавать сайты людям, которые не связаны с дизайном и разработкой.
  • CMYK
    субтрактивная схема формирования цвета, которая используется в основном в полиграфии. В CMYK используются четыре цвета – Cyan (голубой), Magenta (пурпурный), Yellow (желтый) и blacK (черный) для формирования цвета. Каждое из чисел, используемых для обозначения цвета в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию.
  • CSS
    каскадные таблицы стилей – формальный язык, который используется для описания внешнего вида веб страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется для задания цветов, шрифтов и расположения отдельных блоков на веб страницах.

D

  • DPI, PPI
    количество точек (пикселей для PPI), которые помещаются на один дюйм экрана.

F

  • Favicon
    это маленькие (обычно 16х16 пикселей, реже 32х32 пикселя) иконки, которые отображаются на вкладке сайта в браузере возле названия сайта.
  • Font Weight
    определяет насыщенность (толщину) символов в тексте.
  • Front End
    Фронтэнд — часть сайта, исполняемая на стороне пользователя. В вебе в качестве фронтэнда выступают HTML-вёрстка, стили CSS и JavaScript. Применимо к CMS, фронтэнд является лицевой частью сайта, которую видит пользователь.

G

  • Grid
    Сетка — набор вертикальных и горизонтальных линий, которые формируют систему для расположения объектов.

H

  • HSB
    трёхканальная схема формирования цвета. Название происходит от первых букв английских слов: Hue (цветовой тон), Saturation (насыщенность), Brightness (яркость).

K

  • Kerning
    кернинг — расстояние между определенными парами символов: LA, Tr, Ta, Ty, Wa, WA, Wo, Ya и другими.

L

  • Landing Page
    лэндинг, посадочная страница — это веб-страница, собранная определенным образом, главной задачей которой является сбор контактных данных аудитории или продажа товара.
  • Layers
    Слои — используются в Photoshop для компоновки изображения. Слои напоминают стопку прозрачных листов, через прозрачные области вышележащих слоев можно видеть содержимое нижних слоев.

M

  • Margin
    (внешний отступ) – внешний отступ от элемента.
  • Mockups
    используются в Photoshop для компоновки изображения. Слои напоминают стопку прозрачных листов, через прозрачные области вышележащих слоев можно видеть содержимое нижних слоев.
  • MVP
    Продукт, который содержит минимальный набор функций, необходимых для функционирования. Создание MVP позволяет оценить, насколько продукт интересен людям, и стоит ли его развивать в дальнейшем.

N

  • Navigation
    (навигация, меню) – это система ссылок, которая позволяет пользователю перемещаться по сайту либо приложению.
  • Negative Space
    (белое пространство, пустое пространство, молоко) – часть страницы, которая не содержит текст или изображения

R

  • Resolution
    разрешение, резолюшин – обозначает количество пикселей отображаемых на экране (например 1280х1024).
  • Responsive
    (адаптивный) дизайн – это вид дизайна сайта (приложения), который позволяет отображать сайт (приложение) одинаково корректно на устройствах с любым размером экрана.
  • RGB
    аддитивная схема формирования цвета. Нужный цвет получается путем смешения световых излучений трёх первичных цветов – красного, зелёного и синего (Red, Green, Blue). Смешение 100% первичных цветов даёт белый цвет.

S

  • Sketches
    быстрые, лишенные деталей зарисовки будущего дизайна.
  • Sketchpad
    альбом для зарисовок скетчей. Могут иметь схематически нанесенные изображения различных устройств, для создания более наглядных зарисовок.
  • Specification
    (техническое задание) – детальное или не очень описание целей, функционала, структуры и внешнего вида разрабатываемого сайта (приложения). Данный документ очень упрощает жизнь дизайнерам.

T

  • Tracking
    равномерно изменение расстояния между буквами (всеми, в отличии от кернинга).

U

  • UI
    (пользовательский интерфейс) – понятие, включающее в себя определённый набор графически оформленных элементов. По сути UI отвечает за то, как выглядит сайт (приложение).
  • Usability
    это то, насколько просто пользователям использовать ваш сайт (приложение) для достижения определённых целей.
  • UX
    (пользовательский опыт) – понятие включающее в себя то, как продукт функционирует, и, какие эмоции вызывает и пользователей.

V

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

W

  • Wireframes
    это схематическое отображение основных блоков будущего сайта (приложения). Обычно создаются для того чтобы понять как лучше разместить обьекты для достижения пользователем поставленной цели. Зачастую делаются черно-белыми, чтобы не отвлекать внимание от функционала.
Made on
Tilda