用jQuery實現搜尋框的過濾效果

遇到的問題:

1.動態新增了某些元素,在動態新增的某個元素上繫結事件失效

原因:因為需要繫結的元素的直接父元素也是動態新增的

解決:向上為上一級父元素繫結事件

$(".check-box").on('click','i',function());

$(".total").click(function()else

});

-- 彈出搜尋列表;

-- 為document繫結一次性點選事件,隱藏搜尋列表;

-- 阻止事件流

-- 為搜尋列表繫結點選事件

-- 阻止事件流

selectobj.css("display","block");

$(document).one("click", function());

e.stoppropagation();

});selectobj.on("click", function(e));

效果圖大概如下:

附上完整**:

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>用jquery實現搜尋框的過濾效果
title
>
<
style
>
.wrap
.wrap p
label
.box
.select-list
.select-list li
.active
.filter-box
.check-box
.check-value
i.filter
input:disabled
style
>
head
>
<
body
>
<
div 
class
="wrap"
>
<
p>人員: <
label
><
input 
type
="checkbox"
value
="all"
class
="total"
name
="all"
>全選
label
>
p>
<
div 
class
="box"
>
<
ul class
="select-list"
>
<
li>12
li>
<
li>ee
li>
<
li>52
li>
<
li>6882
li>
<
li>6882
li>
<
li>aaa
li>
ul>
<
div 
class
="filter-box"
>
<
span 
class
="check-box"
>
span
>
<
input 
type
="text"
class
="filter"
>
div>
div>
div>
body
>
<
script 
src="jquery-1.11.3.min.js"
>
script
>
<
script
>
$(document).ready(
function
());
e.stoppropagation();
//阻止繫結在filterobj上的事件傳播到其他節點
});            selectobj.on(
"click", 
function
(e));
//點選列表中的值,新增到搜尋框中
selectobj.find("li
").click(
function
()            });
//點選x刪除對應的值$("
.check-box
").on(
'click',
'i',
function
());
//過濾功能
//讓jquery的contains方法不區分大小寫
jquery.expr[':
'].contains 
=function
(a,i,m);
//搜尋框文字一旦改變就匹配查詢$("
.filter")
.change( 
function
()  
else
return
false
;                    })
.keyup( 
function
() );
}//全選後,禁用input,隱藏列表$("
.total
").click(
function
()else
});});
script
>
html
>

選擇框實現搜尋過濾

qryall this.service.getallcustomer params subscribe data 搜尋 templist customerfilter no 要把qryall 放到oninit 中，剛載入時就執行。splice 方法用於新增或刪除陣列中的元素。語法 array.spl...

jquery實現搜尋框類似提示功

用jquery實現的類似google baidu搜尋框的提示功能.autopoint.js author 範永強 depends jquery.js function 類似google搜尋框提示功能 use input1,input2 autopoint 對所有需要自動提示功能的輸入框物件使用aut...

jquery 實現百度搜尋過濾的例子

發現，很多以前都會的，很久沒弄了，又忘了，等用的時候又一大堆，所以，以後我要把我所要的都記載在部落格裡，翻的時候好找，前台頁面 後台 string key request.querystring q string sqlstr select username from b employee wher...