<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Фильтрация по первым буквам на JQuery

Фильтрация по первым буквам на JQuery

Моему другу на собеседовании в одну it компанию, дали следующее задание: "Как при помощи JQuery отфильтровать данные из списка по первым буквам в названии городов?"

Список городов:

  • Москва
  • Минск
  • Могилев
  • Тверь
  • Сургут

Что в итоге должно получиться?

Фильтрация по первым буквам на JQuery.

Уточняем задание на понятном языке.

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

Демонстрация примера

Метод filter()

Для решения этой задачи, подходит метод filter(). Что он делает? Суть фильтрации состоит в том, чтобы существенно уменьшить набор значений, не подпадающих под заданные условия, путем скрытия ненужных вариантов.

Как будем решать?

Моему другу повезло, что фильтрацию надо сделать на Jquery, а не на JS. Нам потребуется поле для ввода – тег input и список с городами – тег ul.

HTML разметка


<section>
<input id="demoInput" type="text" placeholder="Введите ваш город..">
<br>
<ul id="demoList">
  <li>Москва</li>
  <li>Минск</li>
  <li>Могилев</li>
  <li>Тверь</li>
  <li>Сургут</li>
</ul>
</section>

Немного приукрасим для привлекательности с помощью CSS.

CSS код


section {
  width: 320px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ddd;
  font-family: 'Roboto Slab', sans-serif;
}

#demoInput {
  width: 260px;
  background-image: url('searchicon.png'); /* размещение иконки с лупой */
  background-position: 10px 12px; /* позиционирование иконки */
  background-repeat: no-repeat; /* запрет на размножения картинки-иконки */
  padding: 12px 20px 12px 40px; /* поля внутри инпута */
  border: 1px solid #ddd; /* серая рамка */
  margin-bottom: 12px; /* пространство снизу */
}

#demoList {
/* Убираем дефолтные стили списка */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#demoList li {
  border: 1px solid #ddd; /* добавление границ между элементами */
  margin-top: -1px; /* убирает двойную рамку */
  background-color: #f5f5f5; /* цвет фона */
  padding: 12px; /* отступы внутри списка */
  text-decoration: none; /* удаляет дефолтное подчеркивание текста */
  font-size: 18px; /* размер шрифта */
  color: #6b5e51; /* цвет текста списка */
  display: block; /* отобразить как блочный элемент */
}

Пора приступать к самому важному этапу – начать программирование на JQuery. Между тегами head подключаем библиотеку JQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JQuery код


<script>
$(document).ready(function(){ //1
  $("#demoInput").on("keyup", function() { //2
    var value = $(this).val().toLowerCase(); //3
    $("#demoList li").filter(function() { //4
   $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) //5
  });
  });
});
</script>

У нас получилось 5 строчек кода, требующих подробных комментариев.

// 1 – Прежде, чем скрипт начнет выполняться, браузер должен увидеть все DOM элементы. Скрипт начнет работу, когда браузер будет готов.

// 2 – Вызывается функция, при наступления события keyup в поле ввода с идентификатором demoInput, когда пользователь введет что-нибудь с клавиатуры и отпустит её.

// 3 – В текущем элементе (this), полученное значение (буквы введенные пользователем) с помощью метода val (), метод toLowerCase() преобразует текст в нижний регистр что сделает поиск нечувствительным к регистру (допускается поиск "москва", "Москва" и даже "МОСКВА"). Это значение присваивается переменной value.

// 4 – Вызывается функция, после циклического перебора всех тегов li, находящихся внутри ul с идентификатором demoList. Метод filter(), сопоставляет введенные значения (первые буквы) пользователем с указанными в списках (города).

// 5 – Выполняется тело функции. Метод toggle() скрывает все строки, которые не соответствуют поиску. Метод indexOf () возвращает позицию первого найденного совпадения – строка с текстом.

Для выполнения фильтрации на JS, нам пришлось бы написать гораздо больше кода.


Фильтрация по первым буквам на JQuery.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.