先来一堆效果图：

 代码：

<!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. hdu 1811拓扑排序+并查集（容器实现）

    http://www.cnblogs.com/newpanderking/archive/2012/10/18/2729566.html #include<stdio.h> #includ ...

  2. 【页面传值6种方式】- 【JSP 页面传值方法总结：4种】 - 【跨页面传值的几种简单方式3种】

    阅读目录 1. URL 链接后追加参数 2. Form 3. 设置 Cookie 4. 设置 Session JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧. 试着将各种方式总 ...

  3. [codeVS1404] 字符串匹配

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master         题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度. ...

  4. poj 3074

    题意:解数独 分析: 完整的数独有四个充要条件: 1.每个格子都有填数字 2.每列都有1~9中的每个数字 3.每行都有1~9中的每个数字 4.每个9宫格都有1~9中的每个数字 可以转化成精确覆盖问题. ...

  5. 函数式语言（functional language）定义、函数式语言的种类以及为什么函数式语言会流行起来的学习笔记

    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...

  6. BZOJ(7) 1085: [SCOI2005]骑士精神

    1085: [SCOI2005]骑士精神 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3233  Solved: 1911[Submit][Stat ...

  7. Android开发之利用SQLite进行数据存储

    Android开发之利用SQLite进行数据存储 Android开发之利用SQLite进行数据存储 SQLite数据库简单介绍 Android中怎样使用SQLite 1 创建SQLiteOpenHel ...

  8. 5分钟APIG实战： 使用Rust语言快速构建API能力开放

    序言:Rust语言简介 参与过C/C++大型项目的同学可能都经历过因为Null Pointer.Memory Leak等问题“被” 加班了不知道多少个晚上.别沮丧,你不是一个人,Mozilla Fir ...

  9. Android Studio最新配置教程2016

    http://blog.csdn.net/wen_demo 一.Android studio 基本简单介绍 1.Android studio和Eclipse的差别: 1.Studio中有Project ...

  10. PHP数字左侧自动补零

    1.输出数字为001,002... <?php $number=0; if($number<100) { $number=$number+1; $txt=sprintf("%03 ...