无意中找到一种利用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. Linux服务器使用XShell上传下载文件

    在学习Linux过程中,我们常常需要将本地文件上传到Linux主机上,这里简单记录下使用Xsheel工具进行文件传输 1:首先连接上一台Linux主机 2:输入rz命令,看是否已经安装了lrzsz,如 ...

  2. java 基础解析

    http://www.cnblogs.com/-new/tag/java%E5%9F%BA%E7%A1%80%E8%A7%A3%E6%9E%90/

  3. RabbitMq初探——用队列实现RPC

    rabbitmq构造rpc 前言 rpc——remote procedure call 远程调用.在我接触的使用过http协议.thrift框架来实现远程调用.其实消息队列rabbitmq也可以实现. ...

  4. ceph: health_warn clock skew detected on mon的解决办法

    造成集群状态health_warn:clock skew detected on mon节点的原因有两个,一个是mon节点上ntp服务器未启动,另一个是ceph设置的mon的时间偏差阈值比较小. 排查 ...

  5. ClamAV学习【7】——病毒库文件格式学习

    搜查到一份详细的ClamAV病毒文件格式资料(http://download.csdn.net/detail/betabin/4215909),英文版,国内这资料不多的感觉. 重点看了下有关PE的病毒 ...

  6. C指针 【温故】

    概念 1 指针也是一个变量,做为指针变量的值是另一个变量的地址.指针存放的内容是一个地址,该地址指向一块内存空间 其一般形式为: 类型说明符 *变量名: 其中,*表示这是一个指针变量,变量名即为定义的 ...

  7. Myeclipse修改项目名称发布后web Context root名称无法修改

    选中项目,右键--->Properties--->在搜索框搜索:deployment as  然后点击显示出的搜索项.修改右侧视图的Web Context Root名称即可. 如图:

  8. java爬虫中jsoup的使用

    jsoup可以用来解析HTML的内容,其功能非常强大,它可以向javascript那样直接从网页中提取有用的信息 例如1: 从html字符串中解析数据 //直接从字符串中获取 public stati ...

  9. 2016级算法期末上机-C.简单·Bamboo's Fight with DDLs III

    简单·Bamboo's Fight with DDLs III 分析 一句话:贪心,简单哈夫曼应用,要求的其实是所有结点的值与权值的乘积之和,也就是带权路径长. 可以理解为非叶子节点的权值的和,这里的 ...

  10. leetcode python找不同

    给两个字符串,第二个字符串是第一个字符串乱序后再随机插入一个字母在随机的位置,需要我们找到这个字母 输入: s = "abcd" t = "abcde" 输出: ...