先来一堆效果图：

 代码：

<!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. poj 1659 判断是否能构成图Havel-Hakimi定理

    //用到了Havel-Hakimi定理,判断是否能够构图 //两种情况不能构图,1:对剩下序列排序后,最大的度数超过了剩下的顶点数 // 2:对最大的度数后面的f个度数减-后,出现了负数 //记录到临 ...

  2. MySQL的Date()函数拼接

    SELECT date_format(DATE(a.date_created),'%Y-%c-%d') As dateCreate, SUM(a.sm) As sumAmount, sum(order ...

  3. Win32编程API 基础篇 -- 1.入门指南 根据英文教程翻译

    入门指南 本教程是关于什么的 本教程的目的是向你介绍使用win32 API编写程序的基础知识(和通用的写法).使用的语言是C,但大多数C++编译器也能成功编译,事实上,教程中的绝大多数内容都适用于任何 ...

  4. [bzoj 1005][HNOI 2008]明明的烦恼（prufer数列+排列组合）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1005 分析: 首先prufer数列:http://baike.baidu.com/view/1 ...

  5. SVM学习（续）核函数 & 松弛变量和惩罚因子

    SVM的文章可以看:http://www.cnblogs.com/charlesblc/p/6193867.html 有写的最好的文章来自:http://www.blogjava.net/zhenan ...

  6. iOS 设置启动页面 时间

    [NSThread sleepForTimeInterval:3.0];  时间越大  ,启动页面停留的时间越长 iOS 8之后,,创建项目自带的有  LaunchScreen.xib  可直接用

  7. atitit. 集合groupby 的实现(2)---自己定义linq查询--java .net php

    atitit.  集合groupby 的实现(2)---自己定义linq查询--java .net php 实现方式有例如以下 1. Linq的实现原理流程(ati总结) 1 2. groupby   ...

  8. css高级：flash嵌入

    1,由flash创建的object/embed标签的标准集.缺点:他们与各种无效属性和元素在一起被加载,破坏文档对web标准的依从性, 因为embed是人生w3c规范没有的专有元素. 2,迂回解决方案 ...

  9. 【bzoj1821】[JSOI2010]Group 部落划分 Group

    题目大意:要求把n个点分成m块,使得每一块之间的距离的最小值最大 n^2枚举所有点之间距离 然后sort一下 并查集维护连通关系 一开始e[]开MAXN然后WA了测了4ms,然后开MAXN<&l ...

  10. CMDBuild安装及webservice接口的获取

    近期项目组之前一直使用的OneCMDB出现了问题,在增删改数据时异常的慢.于是考虑能否够优化OneCMDB.由于本人水平有限,对OneCMDB进行代码级别的优化临时还有点难度.于是就对现有的其它开源C ...