หน้าเว็บ

วันอาทิตย์ที่ 24 มิถุนายน พ.ศ. 2555

jquery(javaScript) highlight html

        อันนี้เป็น 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;
}

ไม่มีความคิดเห็น:

แสดงความคิดเห็น