无意中找到一种利用css就可实现的搜索过滤的方法，不得不说看了代码之后确实被惊艳到了，亏我之前面试还因为做这个功能做太慢而拖了后腿。在此记录下代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         [type=search]{
  8.             width: 160px;
  9.             padding: 5px;
  10.         }
  11.         label{
  12.             display: block;
  13.             width: 170px;
  14.             background-color: #fff;
  15.             box-shadow: 1px 0 #ccc,0 1px #ccc,-1px 0 #ccc,0 -1px #ccc;
  16.             visibility: hidden;
  17.         }
  18.         [type=search]:focus + label{
  19.             visibility: visible;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <input type="search" name="">
  25.     <label for="city">
  26.         <div class="list" data-ciry="广州guangzhou">广州市</div>
  27.         <div class="list" data-ciry="哈尔滨haerbin">哈尔滨市</div>
  28.         <div class="list" data-ciry="深圳shenzhen">深圳市</div>
  29.         <div class="list" data-ciry="长春changchun">长春市</div>
  30.         <div class="list" data-ciry="成都chengdu">成都市</div>
  31.         <div class="list" data-ciry="北京beijing">北京市</div>
  32.         <div class="list" data-ciry="上海shanghai">上海市</div>
  33.         <div class="list" data-ciry="台北taibei">台北市</div>
  34.     </label>
  35.  
  36.     <script type="text/javascript">
  37.         var s = document.createElement('style'),
  38.             input = document.querySelector('input');
  39.  
  40.         document.head.appendChild(s);
  41.  
  42.         input.addEventListener('input',function(){
  43.             if(this.value !== ''){
  44.                 s.innerHTML = '.list:not([data-ciry*=' + this.value + ']){display:none}';
  45.             }
  46.             else{
  47.                 s.innerHTML = '';
  48.             }
  49.         })
  50.  
  51.     </script>
  52. </body>
  53. </html>

首先思路就是利用Input的focus伪类来实现下拉的隐藏显示，其次就是一个input事件给不匹配的城市给隐藏掉。

具体可参考这里。

利用css实现搜索过滤的更多相关文章

  1. vuejs 1.x - 实例：搜索过滤

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. 如何利用CSS选择器抓取京东网商品信息

    前几天小编分别利用Python正则表达式.BeautifulSoup.Xpath分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如何实现京东商品信息的精准匹配~~ CSS选择器 目前 ...

  3. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  4. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  5. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  6. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  8. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  9. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

随机推荐

  1. Replication--复制相关的作业

    复制使用下列作业来执行计划维护和按需维护 作业名称 说明 默认调度 代理历史记录清除:分发 从分发数据库中删除复制代理历史记录. 每十分钟运行一次 分发清除:分发 从分发数据库中删除复制的事务. 停用 ...

  2. Varnish 学习资料收集

    高性能HTTP加速器Varnish(安装配置篇) 利用Varnish构建Cache服务器笔记 Varnish代理服务器部署 Varnish基础概念详解 Varnish的配置语言VCL及其内置变量介绍 ...

  3. WinForm 窗体应用程序（初步）之三

    进程: 进程,简单的说,就是让你的程序启动另一个程序. 1.Process.Start("calc");//启动计算器 弊端:只认识系统自带的程序,如果写错系统会崩溃. 2. // ...

  4. JDBC技术（汇聚页）

    JDBC代表Java数据库连接(Java Database Connectivity),它是用于Java编程语言和数据库之间的数据库无关连接的标准Java API, 换句话说:JDBC是用于在Java ...

  5. long int double float

    参考:https://blog.csdn.net/ideality_hunter/article/details/78432486 long是长整型,64位 int是短整型,32位 double是双精 ...

  6. java修饰符顺序

    Modifiers should be declared in the correct order (squid:ModifiersOrderCheck) Code smell Minor The J ...

  7. SQL 中用户建立与权限授予

    SQL 中用户建立与权限授予 一.原有 如果大家对我的博客动态非常关注的话,应该又看到我弄了一个随机MAN信息的小工具.但是呢,那个工具还有待加强(显示效果不是那么的好). 所以我就希望可以显示一些简 ...

  8. Windows系统下如何在cmd命令窗口中切换Python2.7和Python3.6

    针对在同一系统下我们可能安装多个版本的Python,毕竟Python2.7与Python3.6还是有不同的需求,但是在用Cmd命令窗口是我们可能默认的系统变量环境是其中一个版本,当我们需要在cmd命令 ...

  9. 【性能测试】jmeter的坑(1)——如何在多网卡情况下正确连接

    问题现象: 性能测试时,使用的服务器配置了双网卡,windows客户机配置了四网卡,坑爹的配置,内外网的隔离,导致在使用jmeter进行分布式测试的时候总是连接失败. 原因分析: Jmeter采用了r ...

  10. 开源代码MyCommons

    MyCommons是我在开发Android App中,经过多个项目的实践和应用,上十次修改的,总结起来的代码,目的是希望大家能够快速的完成项目的开发. 主要也是参考了afinal和xutils2个框架 ...