Практикуйте небольшую демо-страницу поиска

JavaScript
❝

"В древности те, кто творил великие дела, были не только талантливы в мире, но и обладали волей к упорству."--Су Ши

❞

написать впереди

Когда мы используем определенную поисковую систему, нас беспокоит спам на ее страницах. Через этот блог мы можем сами написать определенный интерфейс поиска, и таким образом мы можем интегрировать определенную песню и определенное приложение в один интерфейс, который нам удобен в использовании. Введите тему ниже! ! !

Окончательный эффект выглядит следующим образом

анализ случая

HTML-код

Проанализируйте случай статических страниц

image-20201115200610033
image-20201115200610033

Реализуйте его с помощью HTML-кода следующим образом:

<!-- 搜索框的整体容器 -->
<div class="container">
  <!-- 搜索框的容器 -->
  <div class="search-container">
    <!-- 搜索框 -->
    <input type="text" id="serach">
    <!-- 搜索提示框的容器 -->
    <div class="content">
      <ul></ul>
    </div>
  </div>
  <!-- 按钮容器 -->
  <div class="button">
    <a id="serachBtn" href="#">百度一下</a>
  </div>
</div>

CSS-стили

Код стиля CSS выглядит так:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/* 最外层容器 */
.container {
  width: 654px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 搜索框的样式 */
.search-container {
  width: 546px;
}

input {
  display: block;
  width: 546px;
  height: 44px;
  padding: 12px 16px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 10px 0 0 10px;
  border: 2px solid #c4c7ce;
  background: #fff;
  color: #222;
  overflow: hidden;
}

/* 当按钮获取焦点时边框颜色有所变化 */
input:focus {
  border: 2px solid #4e6ef2;
}

/* 按钮的样式 */
.button {
  position: absolute;
  width: 108px;
  top: 0;
  right: 0;
}

a {
  text-decoration: none;
  display: block;
  cursor: pointer;
  width: 108px;
  height: 44px;
  line-height: 45px;
  padding: 0;
  background-color: #4e6ef2;
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  color: #fff;
  font-weight: 400;
  text-align: center;
}

/* 搜索提示框的样式 */
.content {
  width: 546px;
  border: 2px solid #4e6ef2;
  border-radius: 10px 0 0 0;
  display: none;
}

/* 每个内容的样式 */
.search-container li {
  padding: 2px 8px;
  cursor: pointer;
}

.search-container li:hover {
  background-color: aquamarine;
}

Конечным результатом является реализация статической страницы следующим образом:

image-20201115201300534
image-20201115201300534
❝

Стоит отметить, что наша поисковая подсказка по умолчанию скрыта.

❞

JavaScript-код

Здесь используется не нативный JavaScript, а сторонняя библиотека — здесь представлен jQuery.

Код импорта выглядит следующим образом

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

Окно подсказки Baidu содержит много данных, что делает его очень мощным. Здесь у нас нет данных Baidu, мы сами создаем новые.jsonфайл, который используется для создания окна асинхронной подсказки.

.jsonСодержимое файла следующее

[{
  "name": "java",
  "value": [
    "java", "javascript", "javascript权威指南", "javascript高级程序设计"
  ]
}, {
  "name": "jQuery",
  "value": [
    "jQuery", "jQuery Ajax"
  ]
}]

"первый шаг": Связать для нашей окна поискаinputсобытие, которое запускается при изменении содержимого нашего окна поиска. Конкретные шаги реализации следующие:

  1. Привязать к окну поискаinputмероприятие.
  2. Очистить старую подсказку поиска
  3. Получить содержимое окна поиска
  4. Получать.jsonсодержимое файла
  5. Поскольку полученный файл JSON начинается как массив из двух объектов, нам нужно сначала пройтись по массиву, чтобы получить значение его имени.
  6. Определите, находится ли содержимое поля поиска в значении имени, затем выполните итерацию по значению значения и добавьте его к<ul>середина

Пример кода выглядит следующим образом:

$('#serach').on('input', function () {
  // 清除相关数据
  $('.content>ul').empty()
  // 1. 根据用户输入的内容，动态获取相关提示数据
  var inputValue = $(this).val();
  $.getJSON('data/data_serach.json', function (data) {
    $.each(data, function (index, obj) {
      var name = obj.name;
      // 判断是否包含字符串，返回索引值
      if (name.indexOf(inputValue) >= 0) {
        var value = obj.value;
        $.each(value, function (index, text) {
          $('.content>ul').append($('<li>' + text + '</li>'))
        });
      }
    });
  });
  // 2. 将提示框变为现实状态
  $('.content').css('display', 'block')
})

"второй шаг": выберите наш<li>заменить текстовое содержимое в поле поиска. Конкретные этапы реализации следующие:

  1. связыватьclickмероприятие
  2. Получать<li>текстовое содержание
  3. Заменить текстовое содержимое окна поиска
  4. Сделать всплывающую подсказку поиска исчезнувшей

"возникшие проблемы": так как мы будем<li>все были удалены, поэтому для<li>Связывание событий больше не является полезным, решение состоит в использовании делегирования событий иevent.targetсобственность, чтобы получить<li>текстовое содержание

Код реализации выглядит следующим образом:

$('.content ul').click(function (event) {
  var text = $(event.target).text()
  $('#serach').val(text);
  $('.content').css('display', 'none')
})

"третий шаг": скрыть подсказку поиска, когда поле поиска теряет фокус

"возникшие проблемы": когда мы связываемся напрямую с нимblurКогда происходит событие, функция предыдущего шага напрямую недействительна из-за другого порядка выполнения.Скриншот проблемы выглядит следующим образом:

Решение: Поскольку наше окно поиска и поле подсказки имеют общий контейнер, мы привязываем этот контейнерmouseoverа такжеmouseoutсобытие, которое будет выполнено только тогда, когда мышь выйдет за пределы нашего контейнера, чтобы скрыть всплывающую подсказку.

Код реализации выглядит следующим образом:

var flag = false // 鼠标是否在输入框的内的标志
$('.search-container').on('mouseover', function () {
  flag = false
}).on('mouseout', function () {
  flag = true // 鼠标离开搜索的容器，将其置位 true
})
$('#serach').on('blur', function () {
  if (flag) {
    // 当 input 失去焦点 并且鼠标在不搜索容器中 将搜索提示框隐藏
    $('.content').css('display', 'none')
  }
})

"последний шаг": завершает функцию поиска

  1. привязать к кнопкеclickмероприятие
  2. Исправлять<a>изhrefЗначение так, что он может успешно прыгать

Код реализации выглядит следующим образом

var $serachBtn = $('#serachBtn')
$serachBtn.click(function () {
  var inputValue = $('#serach').val();
  $
Категории