JavaScript小项目 06-Type Ahead 头部搜索

最新推荐文章于 2024-06-21 16:41:46 发布

菜到不会下载软件

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量411

点赞数

分类专栏： js小项目文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/m0_57446284/article/details/124645998

版权

js小项目专栏收录该内容

8 篇文章 0 订阅

订阅专栏

06-Type Ahead

主要的功能是在搜索的时候，页面能够实时的显示出相应的结果，并且输入的内容会高亮的显示出来

效果图：

主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Type Ahead 👀</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <form class="search-form">
    <input type="text" class="search" placeholder="City or State">
    <ul class="suggestions">
      <li>Filter for a city</li>
      <li>or a state</li>
      
    </ul>
  </form>
<script>
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

  // const prom=fetch(endpoint)
  // console.log(prom);
  // 1、获取数据
  const citise =[]
  fetch(endpoint).then(response=> response.json())
  .then(data => citise.push(...data))

  // 2、筛选数据
  function filterData(words,citise){
    const newR=new RegExp(words,'gi')
    return citise.filter(data =>{
      return data.city.match(newR) || data.state.match(newR)
    })
  }

  // 分割数组的方法
  function numberWith(x){
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',')
  }

  // 3、展示数据
  function showDate(){
    const showD =filterData(this.value,citise)
    const html=showD.map(data=>{
      // 下面三行代码的主要目的是为了能够在搜索的时候，结果高亮
      const regs=new RegExp(this.value,'gi')
      // 通过使用replace的方法将输入框中的内容替换成高亮效果的样式
      const cityName=data.city.replace(regs,`<span class="hl">${this.value}</span>`)
      const stateName=data.state.replace(regs,`<span class="hl">${this.value}</span>`)
      return `
        <li>
          <span class="name">${cityName} - ${stateName}</span>
          <span class="pupalation">${numberWith(data.population)}</span>
        </li>
      `
    }).join('')

    suggestions.innerHTML=html
  }

  const inputs=document.querySelector('.search')
  inputs.addEventListener('change',showDate)
  // 绑定keyup可以实现当在搜索的时候，实时显示出相应的结果
  inputs.addEventListener('keyup',showDate)
  const suggestions=document.querySelector('.suggestions')
</script>
</body>
</html>

css代码：

html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
}

*, *:before, *:after {
  box-sizing: inherit;
}

input {
  width: 100%;
  padding: 20px;
}

.search-form {
  max-width: 400px;
  margin: 50px auto;
}

input.search {
  margin: 0;
  text-align: center;
  outline: 0;
  border: 10px solid #F7F7F7;
  width: 120%;
  left: -10%;
  position: relative;
  top: 10px;
  z-index: 2;
  border-radius: 5px;
  font-size: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}

.suggestions {
  margin: 0;
  padding: 0;
  position: relative;
  /*perspective: 20px;*/
}

.suggestions li {
  background: white;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 20px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}

.suggestions li:nth-child(even) {
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom,  #ffffff 0%,#EFEFEF 100%);
}

.suggestions li:nth-child(odd) {
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top,  #ffffff 0%,#EFEFEF 100%);
}

span.population {
  font-size: 15px;
}

.hl {
  background: #ffc600;
}

菜到不会下载软件

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小项目 06-Type Ahead 头部搜索

06-Type Ahead主要的功能是在搜索的时候，页面能够实时的显示出相应的结果，并且输入的内容会高亮的显示出来效果图：主要代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Type Ahead 👀</title> <link rel="stylesheet" href="style.css..
复制链接

扫一扫