我希望在jQuery中使用过滤数据进行文本搜索。假设我为文本搜索创建了一个输入框。它的名字是try {
} catch (ArrayIndexOutOfBoundsException aioobe) {
// log here...
}
。搜索框下方会显示完整的列表。
searchbox
我插入了sn. name age destination
1 a b test
2 c c test1
3 d d test
4 v v t1
之类的任何文字。根据此关键字test
,我的数据显示在底部。我无法使用dataTable。
我尝试过但没有成功
http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/
请帮助
答案 0 :(得分:0)
据我了解你的问题,你想在网页上的html中搜索。我们有很多选择。我正在分享这些。
在您的html页面上包含jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
示例HTML
<div class="span8 col-md-4">
<div style="width:329px;" class="span12 col-md-8">
<div class="row-fluid expandcollapse">
<div style="float:left;width:134px;font-weight: normal;">
<span class="permissionsChecked">
<a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="Process" rel="tooltip">
<input type="checkbox" data-permitted="1" value="1" name="aa" style="margin-left: 10px" checked="checked" for="L1_1" id="L1_1_2">
P1
</a>
<br>
<a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="View" rel="tooltip" >
<input type="checkbox" data-permitted="1" value="4" name="aa" style="margin-left: 10px" checked="checked" for="L1_4" id="L1_4_2">
P2</a>
<br>
<a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="Add">
<input type="checkbox" data-permitted="1" value="3" name="aa" style="margin-left: 10px" checked="checked" for="L1_3" id="L1_3_2">
P3</a>
<br>
</span>
</div> </div>
</div>
</div>
现在添加此搜索的最终代码
$(document).ready(function(){
$("#filtersearch").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".permissionsChecked a").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});
在上面的javascript代码中,filtersearch是一个文本框,其中将输入搜索数据。如果任何文本在给定的html中匹配。
我希望这会有所帮助。它工作得很好。
我是通过使用您尝试过的给定网址创建的。 http://designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/