实时搜索功能

来源：互联网发布：帝国cms tags调用编辑：程序博客网时间：2024/05/16 11:40

一、实现在输入框内输入值，进行实时搜索

<input type="text" id="keyword" oninput="searchinfo(this)" />

oninput事件是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触发
onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方法与一般事件相同；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。
onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发
oninput与onpropertychange失效的情况：
oninput事件：
　　（1）当脚本中改变value时，不会触发；
　　（2）从浏览器的自动下拉提示中选取时，不会触发；
onpropertychange事件：
　　当input设置为disable=true后，不会触发。

二、js方法进行关键字输入后相应结果显示

    //引入文件    <script src="/static/jquery/jquery-1.11.1.min.js"></script>    <link href="/static/materialize/css/materialize.min.css" rel="stylesheet">    <script src="/static/materialize/js/materialize.min.js"></script>    //css    <style>        .display-none {            display: none;        }    </style>

html代码

<div class="card gui-List list-unit" onclick="">    <div class="card-content black-text center-align">        <p>你哈</p>    </div></div><div class="card gui-List list-unit" onclick="">    <div class="card-content black-text center-align">        <p>你好</p>    </div></div>

js代码

<script>    function searchinfo(e) {        $(".list-unit").each(function () {            var schoolName = this.children[0].children[0].innerHTML;            if (schoolName.indexOf(e.value) < 0) {                $(this).addClass("display-none");            } else {                $(this).removeClass("display-none");            }        });    }</script>

或

searchinfo()方法通过ajax重新请求获取满足关键字要求的相应数据，在js中通过拼接html代码显示出来（较麻烦）

三、完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title>    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <script src="/static/jquery/jquery-1.11.1.min.js"></script>    <link href="/static/materialize/css/materialize.min.css" rel="stylesheet">    <script src="/static/materialize/js/materialize.min.js"></script>    <style>        #search {            background-color: #f9f9f9;            margin-top: -1px;        }        .display-none {            display: none;        }    </style></head><body><header>    <div class="row navbar-fixed">        <div class="input-field col s12" id="search">            <i class="mdi-action-search prefix"></i>            <input id="icon_prefix" type="text" class="validate" oninput="searchinfo(this)"/>            <label for="icon_prefix">搜索你的学校</label>        </div>    </div></header><div id="list" class="container">    <div class="card gui-List list-unit" onclick="">        <div class="card-content black-text center-align">            <p>你哈</p>        </div>    </div>    <div class="card gui-List list-unit" onclick="">        <div class="card-content black-text center-align">            <p>你好</p>        </div>    </div></div><script>    $(document).ready(function () {        $('#search').pushpin({top: $('#search').offset().top});    });    function searchinfo(e) {        $(".list-unit").each(function () {            var schoolName = this.children[0].children[0].innerHTML;            if (schoolName.indexOf(e.value) < 0) {                $(this).addClass("display-none");            } else {                $(this).removeClass("display-none");            }        });    }</script></body></html>

0 0