所谓模糊查询就是列表中的数据是否有符合关键字或某个字符。
实现的操作方法主要有两种:
1.字符串方法indexOf:
代码如下:
var list = ["中国", "美国", "英国 "];
var arr = [];
for (var i = 0; i < list.length; i++) {
//如果字符串中不包含目标字符会返回-1
if (list[i].indexOf("关键字或字符串") >= 0) {
arr.push(list[i]);
}
}
2.正则表达式RegExp:
<script>
var list = ["中国", "美国", "英国 "];
var len = list.length;
var arr = [];
var reg = new RegExp("关键字或字符串");
for (var i = 0; i < len; i++) {
if (list[i].match(reg)) {
arr.push(list[i]);
console.log(arr);
}
}
</script>
<h3>功能一:输入查询</h3>
<table border="1" cellspacing="0" cellpadding="0" id="table">
<tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>2014213840</td><td>张三</td><td>男</td><td>20</td></tr>
<tr><td>2014213841</td><td>李四</td><td>男</td><td>20</td></tr>
<tr><td>2014213842</td><td>王三</td><td>女</td><td>30</td></tr>
</table>
<input type="text" name="" id="input" value="" placeholder="请输入查询关键字" />
<script>
$(function () {
var text = "";
//实时筛选,不用点击按钮
setInterval(function () {
text = $('#input').val(); //获取文本框输入
// trim 去除字符串的头尾空格
if ($.trim(text) != "") {
$("#table tr:not('#theader')").hide().filter(":contains('" +
text + "')").show();
} else {
$('#table tr').show(); //当删除文本框的内容时,又重新显示表格所有内容
}
}, 100);
})
</script>
<h3>功能二:点击 回车 按钮查询</h3>
<table border="1" cellspacing="0" cellpadding="0" id="table2">
<tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>2014213840</td><td>张三</td><td>男</td><td>20</td></tr>
<tr><td>2014213841</td><td>李四</td><td>男</td><td>20</td></tr>
<tr><td>2014213842</td><td>王三</td><td>女</td><td>30</td></tr>
</table>
<input type="text" name="" id="input2" value="" placeholder="请输入查询关键字" />
<input type="button" name="" id="search" value="搜索" />
<script>
// 通过点击按钮开始筛选
$(function () {
$('#search').click(function () {
var text = $('#input2').val(); //获取文本框输入
if ($.trim(text) != "") {
$("#table2 tr:not('#theader')").hide().filter(":contains('" +
text + "')").show();
}
})
$(document).keydown(function (e) {
if (e.keyCode == 13) {
$('#search').click();
}
});
});
</script>
<h3>功能三:</h3>
<div class="box">
<pre>
KeyDown:按键被按下时发生
KeyPress:用户摁下按键,并且产生一个字符时发生
KeyUp: 用户释放某一个按键时触发
</pre>
<h3>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</h3>
Enter your name: <input type="text" id="color-change" style="width: 300px; height: 30px;">
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#color-change").keydown(function () {
$("#color-change").css("background-color", "#f00");
});
$("#color-change").keyup(function () {
$("#color-change").css("background-color", "#00f");
});
});
</script>
<h3>功能 4:keyup 实现同步输入展示文字 </h3>
<pre>
keyup 是在用户将按键抬起的时候才会触发的,属于整个按键过程中的最后阶段,所以有其特定的用处,
就是在左侧输入,右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。
</pre>
<textarea id="t1"></textarea>
<div id="v1"></div>
<script type="text/javascript">
$(function () {
$('#t1').live('keyup', function () {
$('#v1').text($(this).val());
});
});
</script>