<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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):

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