先来一堆效果图：

 代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="user-scalable=no,width=360,initial-scale=1,minimum-scale=1,maximum-scale=1">

        <title></title>

        <style type="text/css">

            body{

                margin: ;

            }

            #myInput {

                background-image: url('https://static.runoob.com/images/mix/searchicon.png');

                /* 搜索按钮 */

                background-position: 10px 12px;

                /* 定位搜索按钮 */

                background-repeat: no-repeat;

                /* 不重复图片*/

                width: %;

                font-size: 16px;

                /* 加大字体 */

                padding: 12px 20px 12px 40px;

                border: 1px solid #ddd;

                margin-bottom: 12px;

            }

            #myUL {

                /* 移除默认的列表样式 */

                list-style-type: none;

                padding: ;

                margin: ;

            }

            #myUL li a {

                border: 1px solid #ddd;

                /* 链接添加边框 */

                margin-top: -1px;

                background-color: #f6f6f6;

                padding: 12px;

                text-decoration: none;

                font-size: 18px;

                color: black;

                display: block;

            }

            #myUL li a.header {

                background-color: #e2e2e2;

                cursor: default;

            }

            #myUL li a:hover:not(.header) {

                background-color: #eee;

            }

        </style>

    </head>

    <body>

        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">

        <ul id="myUL">

            <li>

                <a href="#" class="header">A</a>

            </li>

            <li>

                <a href="#">Adele</a>

            </li>

            <li>

                <a href="#">Agnes</a>

            </li>

            <li>

                <a href="#" class="header">B</a>

            </li>

            <li>

                <a href="#">Billy</a>

            </li>

            <li>

                <a href="#">Bob</a>

            </li>

            <li>

                <a href="#">博客</a>

            </li>

            <li>

                <a href="#" class="header">C</a>

            </li>

            <li>

                <a href="#">Calvin</a>

            </li>

            <li>

                <a href="#">Christina</a>

            </li>

            <li>

                <a href="#">Cindy</a>

            </li>

        </ul>

    </body>

</html>

<script type="text/javascript">

    function myFunction() {

        // 声明变量

        var input, filter, ul, li, a, i;

        input = document.getElementById('myInput');

        filter = input.value.toUpperCase();

        ul = document.getElementById("myUL");

        li = ul.getElementsByTagName('li');

        // 循环所有列表，查找匹配项

        for(i = ; i < li.length; i++) {

            a = li[i].getElementsByTagName("a")[];

            if(a.innerHTML.toUpperCase().indexOf(filter) > -) {

                li[i].style.display = "";

            } else {

                li[i].style.display = "none";

            }

        }

    }

</script>

js indexOf 列表筛选的更多相关文章

  1. jquery超炫的列表筛选插件

    今天要为大家带来一款非常实用的jquery列表筛选插件,效果非常好.单击某项的时候动画筛选该项的列表.我们一起看下效果图: 在线预览   源码下载 我们一起看下实现的代码: html代码: <d ...

  2. vue 移动端列表筛选功能实现

    最近兴趣所致,打算使用vant搭建一个webapp,由于需要使用列表筛选,没有找到合适组件,于是写了一个简单的功能,权当记录. 效果如下:        HTML: <div class=&qu ...

  3. PHP多条件分类列表筛选功能开发实例

    PHP多条件分类列表筛选功能开发实例,前后台一起实现 后台对接可以拼接sql语句,PHP通过表单值隐藏值筛选,常用又实用! 表单筛选核心函数 function Filter(a, b) { var $ ...

  4. 15个Node.js项目列表

    前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...

  5. 第三百八十九节，Django+Xadmin打造上线标准的在线教育平台—列表筛选结合分页

    第三百八十九节,Django+Xadmin打造上线标准的在线教育平台—列表筛选结合分页 根据用户的筛选条件来结合分页 实现原理就是,当用户点击一个筛选条件时,通过get请求方式传参将筛选的id或者值, ...

  6. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  7. WPF 自定义列表筛选 自定义TreeView模板 自定义ListBox模板

    有很多项目,都有数据筛选的操作.下面提供一个案例,给大家做参考. 左侧是数据源,搜索框加TreeView控件,右侧是ListBox控件.在左侧数据列点击添加数据,然后点击确定,得到所筛选的数据. 下面 ...

  8. js API列表

    //  主要是ES的API和一小部分浏览器的API. //  新加入标准的API有可能是浏览器事实上早已实现的. //   ECMAScript目前是每年都会发布新版本(目前已经相对稳定,每年都会又增 ...

  9. 报表开发工具Finereport移动端app js接口列表【全】

    应用报表工具Finereport的开发人员会发现其移动端app 同样也推出了很多js接口,那这些接口到底有多少,其移动端又有哪些地方支持调用js,这些接口具体又该如何调用呢.根据我平时的开发经验,给大 ...

随机推荐

  1. noip模拟赛 圆桌游戏

    [问题描述] 有一种圆桌游戏是这样进行的:n个人围着圆桌坐成一圈,按顺时针顺序依次标号为1号至n号.对1<i<n的i来说,i号的左边是i+1号,右边是i-1号.1号的右边是n号,n号的左边 ...

  2. poj 2420 模拟退火法基础

    /* 题意:给n个电脑,求一个点到这n个电脑的距离和最小. 模拟退火法:和poj1379的方法类似 因为坐标范围是0-10000 不妨把它看成是10000*10000的正方形来做 */ #includ ...

  3. [codeVS3943] 数学奇才琪露诺

    题目描述 Description 作为上白泽慧音老师的出色弟子,数学奇才琪露诺在算术方面有很深的造诣.今天,codevs有幸请到了这位数学界的奇葩作为本场考试的第一题主考官. 琪露诺喜欢0-9之间的数 ...

  4. Wikioi 3776 生活大爆炸版石头剪子布

    题目描述 Description 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8集中出现了一种石头剪刀布的升级版游戏 ...

  5. SpringMvc切面校验JavaBean及基础类型

    先配置好aop需要的配置,文:https://www.cnblogs.com/jiangxishicheng/p/10896498.html 编写校验切面类: package com.aspect;/ ...

  6. VCS 一次使用。

    One database was down today. So I login the server try to check and fix it. I found the Oracle home ...

  7. MySQL: Create Master - Slave Servers

    http://www.unixmen.com/setup-mariadb-master-slave-replication-in-centos-7/ and http://www.rackspace. ...

  8. erlang二进制数据垃圾回收机制

    erlang二进制数据在内存中有两种存在形式,当数据大小不到 64 bytes,就直接存在进程堆内.假设超过了64 bytes.就被保存到进程外的共享堆里,能够给节点内全部进程共享. erlang有两 ...

  9. php訪问控制

    訪问控制通过keywordpublic,protected和private来实现. 被定义为公有的类成员能够在不论什么地方被訪问.被定义为受保护的类成员则能够被其自身以及其子类和父类訪问.被定义为私有 ...

  10. Oracle Study之--Oracle 11gR2通过RMAN克隆数据库

    Oracle Study之--Oracle 11gR2通过RMAN克隆数据库 Purpose of Database Duplication A duplicate database is usefu ...