先来一堆效果图：

 代码：

<!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 3925 枚举+prime

    /* 因为15很小可以暴力枚举然后用最小生成树的prim来计算 */ #include<stdio.h> #include<string.h> #include<math ...

  2. 基本的数据类型分析----java.lang.Number类及其子类分析

    本文转自http://blog.csdn.net/springcsc1982/article/details/8788345 感谢作者 编写了一个测试程序,如下: int a = 1000, b= 1 ...

  3. MySQL: 改变Homebrew安装MySQL/MariaDB的数据库文件目录

    1. brew install mariadb 2. mysql_install_db --verbose --user=$USER --basedir=/usr/local/Cellar/maria ...

  4. android中读取通讯录学习笔记

    1.读取通讯录时一次读取时,尽量少读取全部属性.特别是列表展示的时候.会让你的列表载入速度变得难以忍受,建议先载入少量属性.然后在详情的时候载入全部属性. 2.在读取一类属性的时候,建议用一个游标,且 ...

  5. 一个经典的消费者和生产者的实现（linux ）

    #include <stdio.h>   #include <pthread.h>   #define BUFFER_SIZE 16 // 缓冲区数量       struct ...

  6. [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams

    When an image fails to load, it triggers an error event. You can capture the error event and merge i ...

  7. Python网络爬虫(一)：初步认识网络爬虫

    不管你是因为什么原因想做一个网络爬虫,首先做的第一件事情就是要了解它. 在了解网络爬虫之前一定要牢记下面4个要点,这是做网络爬虫的基础: 1.抓取 py的urllib不一定去用.可是要学.假设你还没用 ...

  8. QT如何修改编程语言的字体

    工具-选项,然后在文本编辑器中设置要的字体

  9. FZU 2168 防守阵地 I(公式推导)(经典)(中等)

    Problem 2168 防守阵地 I Accept: 377    Submit: 1280 Time Limit: 3000 mSec    Memory Limit : 32768 KB  Pr ...

  10. java web项目优化记录：优化考试系统

    考试系统在进行压力測试时发现,并发量高之后出现了button无反应.试题答案不能写到数据库的问题,于是针对这些核心问题,进行了优化. 数据库方面: Select语句:Select * from TEB ...