ページ内検索絞り込み

with コメントはまだありません

かにまみれのお客様の声ページの量がものすごいことになっていたので、
簡易的に調べたいワードを入力して該当のワードが入っているボイスだけを残すものを作りました。

$(function () {

var formword = “”;
var voiceS = “#voicesearch”;

$(voiceS).css({
“background”:”#FFFFE3″,
“border”:”1px solid #ddd”,
“padding”:”10px”,
“margin-bottom”:”15px”
});

$(“<p>”, {
css:{
},text: “検索したい語句を入力してください。該当の語句が含まれているボイスのみを表示いたします。”
}).prependTo(voiceS);

$(“<input>”, {
css:{
“width”:”200px”,
“margin-right”:”5px”,
“padding”:”5px”
},class:”searchform”
}
).appendTo(voiceS);

$(“<input type=’submit’ value=’絞り込む’ class=’submit’>”).css(“height”, “32px”).appendTo(voiceS);
$(“<input type=’submit’ value=’クリア’ class=’submitclear’>”).css(“height”, “32px”).appendTo(voiceS);

$(“input.submit”).on(“click”, function() {
$(“p.noword”).hide();

formword = $(“input.searchform”).val();
(formword)? $(“.sec”).hide() : false ;
var result = $(“.sec:contains(“+formword+”)”).fadeIn(“slow”);

$(“<p class=’noword’>”).appendTo(voiceS);

//検索結果がなければ
if(result.length === 0) {
$(“p.noword”).text(“一致する語句がございませんでした。”);
}else{
$(“p.noword”).text(result.length+”件のボイスが見つかりました。”).css(“font-weight”,”bold”);
}
});
$(“input.submitclear”).on(“click”, function() {
$(“.sec”).fadeIn(“slow”);
$(“p.noword”).hide();
$(“input.searchform”).val(“”);
});

});

すぐにできるかと思いましたが、
いろいろ、該当ワードがなかったときとか検索数出した方がいいとか
欲も出て時間がかかってしまった・・・

もう少しいろいろバージョンアップしたいので、改良はまた後日。

Leave a Reply