อันนี้เป็น search หน้า index ที่ผมได้เขียนเล่นๆไว้ครับ ลองๆดูน่ะครับ เผื่อนำแนวคิดไปใช้ได้ ผิดพลาดประการใดก็ต้องขออภัยด้วยครับ พอดีผมยังเป็นโปรแกรมเมอร์ถึกอยู่ ^_____^
http://na5cent.blogspot.com/p/index.html
.highlighter{
color : red;
}
.hideSearch{
display: none;
}
$(document).ready(function(){
var backupContent = $(".topic-index-list-style").html();
$("#inputSearchHighlighter").keyup(function(event) {
if($(this).val() == ""){
$(".topic-index-list-style").html(backupContent);
$("#keyWord").html("");
}else{
operation(backupContent);
}
});
});
function operation(backupContent){
if($("#inputSearchHighlighter").val() != ""){
$(".topic-index-list-style").html(backupContent);
var count = highlighter($("#inputSearchHighlighter").val());
$("#keyWord").html("ผลการค้นหา (" + $("#inputSearchHighlighter").val() +") พบจำนวน " + count + " รายการ");
$("#inputSearchHighlighter").val("");
}
}
function highlighter(keyWord){
var countAll = 0;
var reg = new RegExp(keyWord, "gi");
var replace = "<span class='highlighter'>" + keyWord + "</span>";
$("ul li").each(function(){
var li = $(this);
var span = li.find("span");
var ol = li.find("ol");
var countChild = 0;
//ol
ol.find("li").each(function(){
var content = $(this).find("span").html();
if(content != null){
if(content.search(reg) != -1){
countAll++;
countChild++;
$(this).find("span").html(content.replace(reg, replace));
}else{
$(this).addClass("hideSearch");
}
}
});
//span
var content = span.find("b span.topic-index-style").html();
if(content != null){
if(content.search(reg) != -1){
countAll++;
span.find("b span.topic-index-style").html(content.replace(reg, replace));
}else if(countChild==0){
li.addClass("hideSearch");
}
}
});
return countAll;
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น