先来一堆效果图：

 代码：

<!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. java 源码分析2 -List

    1.是一个接口,继承了Collection,提供了size(),isEmpty(),contanis(),iterator(),toArray(),clear()等方法 2.分析常用的ArrayLis ...

  2. JAVA内存模型与线程以及volatile理解

    Java内存模型是围绕在并发过程中如何处理原子性.可见性.有序性来建立的. 一.主内存与工作内存 Java内存模型主要目标是在虚拟机中将变量存储到内存和从内存中取出变量.这里的变量包括:实例字段.静态 ...

  3. java并发操作

    项目中常用的java并发操作 一.java8新特性java并发流操作(结合纳姆达表达式) List<String> list = new ArrayList<>(); list ...

  4. 用API中的raf复制文件图片等及系统找不到指定的文件的解决办法

    该运行是在eclipse中进行的操作,小白的基础理解,如有不妥之处,请大佬们指正.QQ:1055802635 package raf; import java.io.IOException;impor ...

  5. Android学习路线（十八）支持不同设备——支持不同的屏幕

    Android系统使用两个普通属性:尺寸和密度,来对设备屏幕进行分类. 你须要先预測你的应用将会在什么样屏幕的设备上安装,包含屏幕尺寸和密度.这种话,你就须要提供一些可选的资源类让你的应用在不同屏幕的 ...

  6. android_handler(一)

    仅仅是一个简单的handler的样例,目的就是对handler有一个初步的接触. 在layout上加入一个button,点击按钮,然后打印出利用handler传送的数据.(都是执行在mainthrea ...

  7. 跨平台C、C++代码注意的事项

    在我们的开发中,跨平台的需求越来越强烈,怎样保持C/C++代码能在多个平台上编译,是一个比較值得研究的问题.关于跨平台的文章网上非常多,跨平台的库网上也非常多.那么我从自己的跨平台开发经验谈一谈自己的 ...

  8. POJ 3683 Priest John&#39;s Busiest Day (2-SAT+输出可行解)

    题目地址:POJ 3683 第一次做须要输出可行解的题目. . .大体思路是先用强连通来推断是否有可行解,然后用逆序建图.用拓扑排序来进行染色.然后输出可行解. 详细思路见传送门 由于推断的时候少写了 ...

  9. 《转》OpenStack对象存储——Swift

    OpenStack Object Storage(Swift)是OpenStack开源云计算项目的子项目之中的一个.被称为对象存储.提供了强大的扩展性.冗余和持久性.本文将从架构.原理和实践等几方面讲 ...

  10. bzoj2073

    状压dp 预处理每个状态的初始值,枚举子集就行了 #include<bits/stdc++.h> using namespace std; , inf = ; int W, n; < ...