模糊查询
输入关键字或者相关大小写字母实现搜索功能
/****模糊查询****/
$("selector").on("focus", function() {
var that = $(this);
//显示列表
$("selector").show();
//输入实时查询事件，propertychange是IE的输入监听事件，input是其它浏览器
$("selector").on("input propertychange", function() {
$("selector")
.hide() // 隐藏所有
.filter(":contains('" + that.val().toLocaleLowerCase() + "')") //小写
.show(); // 显示已过滤条目
});
});
/****模糊查询 END****/
实时筛选
通过定时器进行实施筛选功能
var text = "";
setInterval(function(){
text = $('selector').val();//获取文本框输入
if($.trim(text) != ""){
$("#table tr:not(:first-child)").hide().filter(":contains('"+text+"')").show();
}else{
$('selector').show();//当删除文本框的内容时，又重新显示表格所有内容
}
},100);
拼音/名字搜索
该方法通过设置搜索项的属性实现
html:
<li pinyin="ly" cityname="临沂">
<a href="#">临沂 </a>
</li>
js:
function searchCity() {
var searchCityName = $("selector").val();
if(searchCityName == "") {
$("selector").show();
} else {
$("selector").each(function() {
var pinyin = $(this).attr("pinyin"); // 通过设置搜索项属性确定
var cityName = $(this).attr("cityName");
if(pinyin.indexOf(searchCityName) != -1 ||
cityName.indexOf(searchCityName) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
$('selector').bind('input propertychange', function() {
searchCity();
});
以上都是简单的页面内搜索，如果涉及到服务器端搜索，可以使用 ajax 实现服务器端搜索功能。
下边是一个相对复杂的搜索框的制作。（针对信息量不大的模糊查询）
html部分：
<div class="wyInput" id="myInput">
<!-- 搜索框部分 -->
<div class="wyinput-group">
<input type="text" placeholder="请输入关键字">
<a href="#" class="wyinput-btn">搜 索</a>
</div>
<!-- 搜索结果下拉框部分 -->
<div class="wyinput-drop">
</div>
</div>
js部分：
$(function () {
//许传入类似案例的json对象，实际中可以使后台获取的数据的填充，类似于显示数据库中有无该数据一样
$("#myInput").wy_inselect([{name:'紫色'},{name:'yellow'},{name:'pink'},{name:'whrite'}]);
});
封装的函数：
(function($){
$.fn.extend({ // 为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。
"wy_inselect":function(options){
if(!isValid(options)) return this; // 判断当前搜索数组是否合规
var $Id = $(this); // 代理当前 this ，当前 this 指的是 id 为 myInput 的dom节点
console.log($Id) //n.fn.init [div#myInput.wyInput, selector: "#myInput", context: document]
var last;
// 重置当前下拉框并隐藏
$Id.find(".wyinput-drop").css("width",$(".wyinput-group input").outerWidth()+"px").hide();
// 监听当前 input 的键盘松开事件
$Id.find(".wyinput-group input").keyup(function(event){
last = event.timeStamp; // timeStamp 事件属性可返回一个时间戳。如：9298.01999987103
setTimeout(function(){ //设时延迟0.5s执行
if(last-event.timeStamp==0)
//如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）
{
var arr= searchIndex($Id,options); // 搜索当前数组
loadDrop($Id,arr); // 设置当前下拉框
}
},500);
})
// 类似事件委托
$Id.find(".wyinput-drop").delegate(".drop-line a","click",function(){
// 当点击搜索结果项时，将当前的点击项填入到搜索框中
var html=$(this).html(); // 当前的 this 指的是被点击项
console.log(html)
console.log($(this)) // n.fn.init [a, context: a]
// 重置结果下拉框，结果填入输入框，并隐藏下拉框
$(this).parents(".wyinput-drop").siblings(".wyinput-group").find("input").val(html);
$Id.find(".wyinput-drop").hide()
})
}
})
//监测参数是否合法
function isValid(options){
return !options || (options && typeof options === "object")?true:false;
}
//模糊查询
function searchIndex($Id,options){ // $Id 为当前的整个搜索框
var $input = $Id.find(".wyinput-group input");
var keywords = $input.val();
var arr=[];
if(keywords==""||keywords==" "){
return arr;
}
$.each(options,function(idx,obj){ // 数组的每一项都是对象
if(obj.name.indexOf(keywords)>=0){
arr.push({name:obj.name});
}
})
console.log(arr);
return arr;
}
//加载下拉框
function loadDrop($Id,arr){
var html = "";
if(arr.length == 0){
$Id.find(".wyinput-drop").html("").hide();
return;
}
$.each(arr,function(idx,obj){
html+='<p class="drop-line">' + '<a href="#">'+obj.name+'</a></p>';
})
$Id.find(".wyinput-drop").html(html).show();
}
})(window.jQuery)
涉及到的方法：
-
timeStamp事件属性可返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。 -
$.fn.extend()函数为 jQuery 扩展一个或多个实例属性和方法(主要用于扩展方法)。参考 -
$.each()是对数组，json 和 dom 结构等的遍历。$.each(arr1,function(i,val){ })两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值。 -
find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。 -
delegate()方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用delegate()方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。类似于事件委托
网友评论