模糊查詢
輸入關(guān)鍵字或者相關(guān)大小寫字母實現(xiàn)搜索功能
/****模糊查詢****/
$("selector").on("focus", function() {
var that = $(this);
//顯示列表
$("selector").show();
//輸入實時查詢事件，propertychange是IE的輸入監(jiān)聽事件耘戚，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();//當刪除文本框的內(nèi)容時嗡髓，又重新顯示表格所有內(nèi)容
}
},100);
拼音/名字搜索
該方法通過設(shè)置搜索項的屬性實現(xiàn)
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"); // 通過設(shè)置搜索項屬性確定
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();
});
以上都是簡單的頁面內(nèi)搜索，如果涉及到服務(wù)器端搜索毕莱，可以使用 ajax 實現(xiàn)服務(wù)器端搜索功能器贩。
下邊是一個相對復(fù)雜的搜索框的制作。（針對信息量不大的模糊查詢）
html部分：
<div class="wyInput" id="myInput">
<!-- 搜索框部分 -->
<div class="wyinput-group">
<input type="text" placeholder="請輸入關(guān)鍵字">
<a href="#" class="wyinput-btn">搜 索</a>
</div>
<!-- 搜索結(jié)果下拉框部分 -->
<div class="wyinput-drop">
</div>
</div>
js部分：
$(function () {
//許傳入類似案例的json對象朋截，實際中可以使后臺獲取的數(shù)據(jù)的填充蛹稍，類似于顯示數(shù)據(jù)庫中有無該數(shù)據(jù)一樣
$("#myInput").wy_inselect([{name:'紫色'},{name:'yellow'},{name:'pink'},{name:'whrite'}]);
});
封裝的函數(shù)：
(function($){
$.fn.extend({ // 為jQuery擴展一個或多個實例屬性和方法(主要用于擴展方法)。
"wy_inselect":function(options){
if(!isValid(options)) return this; // 判斷當前搜索數(shù)組是否合規(guī)
var $Id = $(this); // 代理當前 this 部服，當前 this 指的是 id 為 myInput 的dom節(jié)點
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();
// 監(jiān)聽當前 input 的鍵盤松開事件
$Id.find(".wyinput-group input").keyup(function(event){
last = event.timeStamp; // timeStamp 事件屬性可返回一個時間戳唆姐。如：9298.01999987103
setTimeout(function(){ //設(shè)時延遲0.5s執(zhí)行
if(last-event.timeStamp==0)
//如果時間差為0（也就是你停止輸入0.5s之內(nèi)都沒有其它的keyup事件發(fā)生）
{
var arr= searchIndex($Id,options); // 搜索當前數(shù)組
loadDrop($Id,arr); // 設(shè)置當前下拉框
}
},500);
})
// 類似事件委托
$Id.find(".wyinput-drop").delegate(".drop-line a","click",function(){
// 當點擊搜索結(jié)果項時，將當前的點擊項填入到搜索框中
var html=$(this).html(); // 當前的 this 指的是被點擊項
console.log(html)
console.log($(this)) // n.fn.init [a, context: a]
// 重置結(jié)果下拉框廓八，結(jié)果填入輸入框奉芦，并隱藏下拉框
$(this).parents(".wyinput-drop").siblings(".wyinput-group").find("input").val(html);
$Id.find(".wyinput-drop").hide()
})
}
})
//監(jiān)測參數(shù)是否合法
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){ // 數(shù)組的每一項都是對象
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事件屬性可返回一個時間戳。指示發(fā)生事件的日期和時間（從 epoch 開始的毫秒數(shù)）剧蹂。 -
$.fn.extend()函數(shù)為 jQuery 擴展一個或多個實例屬性和方法(主要用于擴展方法)声功。參考 -
$.each()是對數(shù)組，json 和 dom 結(jié)構(gòu)等的遍歷宠叼。$.each(arr1,function(i,val){ })兩個參數(shù)先巴，第一個參數(shù)表示遍歷的數(shù)組的下標，第二個參數(shù)表示下標對應(yīng)的值冒冬。 -
find()方法獲得當前元素集合中每個元素的后代伸蚯，通過選擇器、jQuery 對象或元素來篩選简烤。 -
delegate()方法為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序剂邮，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用delegate()方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）横侦。類似于事件委托
