一、实现在输入框内输入值，进行实时搜索
<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>新闻热点
疑难解答
