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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        [type=search]{

            width: 160px;

            padding: 5px;

        }

        label{

            display: block;

            width: 170px;

            background-color: #fff;

            box-shadow: 1px 0 #ccc,0 1px #ccc,-1px 0 #ccc,0 -1px #ccc;

            visibility: hidden;

        }

        [type=search]:focus + label{

            visibility: visible;

        }

    </style>

</head>

<body>

    <input type="search" name="">

    <label for="city">

        <div class="list" data-ciry="广州guangzhou">广州市</div>

        <div class="list" data-ciry="哈尔滨haerbin">哈尔滨市</div>

        <div class="list" data-ciry="深圳shenzhen">深圳市</div>

        <div class="list" data-ciry="长春changchun">长春市</div>

        <div class="list" data-ciry="成都chengdu">成都市</div>

        <div class="list" data-ciry="北京beijing">北京市</div>

        <div class="list" data-ciry="上海shanghai">上海市</div>

        <div class="list" data-ciry="台北taibei">台北市</div>

    </label>

    <script type="text/javascript">

        var s = document.createElement('style'),

            input = document.querySelector('input');

        document.head.appendChild(s);

        input.addEventListener('input',function(){

            if(this.value !== ''){

                s.innerHTML = '.list:not([data-ciry*=' + this.value + ']){display:none}';

            }

            else{

                s.innerHTML = '';

            }

        })

    </script>

</body>

</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. Java Socket实现基于TCP和UDP多线程通信

    一.通过Socket实现TCP编程 1.1 TCP编程 TCP协议是面向连接,可靠的,有序的,以字节流的方式发送数据.基于TCP协议实现网络通信的类有客户端的Socket类和服务器端的ServerSo ...

  2. 安装git出现templates not found的问题

    背景 goods.api需要在新机器上部署,该机器上没有安装git,需要安装git,查询git版本为2.4.5-1.el6 ,使用yum 一顿安装后,执行git clone命令告知warning: t ...

  3. Java Been, EJB, POJO 之间的区别

    Java Bean 是可复用的组件,对Java Bean并没有严格的规范,理论上讲,任何一个Java类都可以是一个Bean.但通常情况下,由于Java Bean是被容器所创建(如Tomcat)的,所以 ...

  4. 深入了解java虚拟机（JVM） 第九章 class文件结构及意义

    Class文件是访问jvm的重要指令,学习了class文件能够更加深入的了解jvm的工作过程.本文只进行概况总结,要进行更加详细的学习class文件,可以参考:https://blog.csdn.ne ...

  5. “全栈2019”Java异常第五章：一定会被执行的finally代码块

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  6. objectARX 关于MFC类向导 无法向此非CCmdTarget派生类添加任何命令 的解决方式

    objectARX 关于MFC类向导 无法向此非CCmdTarget派生类添加任何命令  的解决方式 图文By edata ,转载注明出处 http://www.cnblogs.com/edata 1 ...

  7. C语言中宏定义与C++中的内联函数

    一,宏定义:在预处理的时候把宏定义的内容替换到代码中,正常编译. 1,无参数宏定义和有参数宏定义 (1)宏定义不能加分号,比如:#define  PI 3.24;错的,#define  PI 3.24 ...

  8. Centos7.4下安装Nginx

    一.下载Nginx Nginx下载地址:http://nginx.org/en/download.html Nginx是C语言开发的,建议在Linux上运行.由于Nginx的一些模块依赖一些lib,所 ...

  9. 转一下大师兄的"MySQL高可用架构之MHA"

    简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是 ...

  10. 4、TensorFlow基础（二）常用API与变量作用域

    1.图.操作和张量 TensorFlow 的计算表现为数据流图,所以 tf.Graph 类中包含一系列表示计算的操作对象(tf.Operation),以及在操作之间流动的数据 — 张量对象(tf.Te ...