【ココログ】「みんなで解決！広場」検索のUpdate(n件ずつ表示等)
【ココログ】「みんなで解決！広場」過去ログ検索のバグFix他で、
| 現状、検索結果を1ページで表示しているので、たくさんの記事にヒットしすぎるとブラウザが不安定になってしまう
ということを言っておりましたが、今回、検索結果で一度に表示できる件数の方に制限をつけ、前後にページ切替できるナビ機能を搭載してみました。
ご利用の場合は、お手数ですが検索窓設置用フォームを以下のものに差替えて下さい。
既存のフォームでも使用できますが、今回のナビ機能等は使用できず、従来のままの表示となりますのでご了承下さい
<script type="text/javascript" charset="utf-8" src="https://furyu.tea-nifty.com/script/cocoQAsearch.js"></script>
<style type="text/css">
<!--
.ccqas_notice {
text-align:left; font-size: x-small;
}
.ccqas_links {
text-align:left; font-size: x-small;
line-height: 140%; margin-bottom: 8px;
}
.ccqas_ol {
text-align: left;
}
.ccqas_li {
}
.ccqas_title {
}
.ccqas_user {
color: brown;
}
.ccqas_date {
padding-right: 8px;
}
.ccqas_body {
padding-bottom: 8px;
}
.ccqas_update {
text-align:right; font-size: smaller;
}
.ccqas_copyright {
text-align:right; font-size: smaller;
}
.ccqas_nav, .ccqas_nav_disable, .ccqas_resize_open, .ccqas_resize_close {
color: brown;
border: outset 1px silver;
text-align:center;
}
.ccqas_nav, .ccqas_nav_disable {
font-size: 10px; line-height: 120% ;
margin: 0px; padding: 2px 0px 2px 0px;
}
.ccqas_nav {
background-color: lightyellow;
}
.ccqas_nav_disable {
background-color: whitesmoke;
}
.ccqas_resize_form {
display: inline;
}
.ccqas_resize_open, .ccqas_resize_close {
float: right;
font-size: 9px;
margin: 0px 0px 0px 4px; padding: 2px 0px 0px 0px;
}
.ccqas_resize_open {
background-color: lightyellow;
}
.ccqas_resize_close {
background-color: lightcyan;
}
.ccqas_body {
word-break: break-all;
overflow: auto;
}
-->
</style>
<form name="ccqas_form" class="ccqas_form" action="javascript:cocoQAsearch.requestForm();">
<input type="text" name="search_box" class="search_box" value="" />
<input type="button" name="search_button" class="search_button" onclick="javascript:cocoQAsearch.requestForm(this.form);" value="検索" />
<div class="check_box"><input type="checkbox" name="debut" checked />はじめる前</div>
<div class="check_box"><input type="checkbox" name="beginner" checked />初級者向け</div>
<div class="check_box"><input type="checkbox" name="expert" checked />上級者向け</div>
<div class="check_box"><input type="checkbox" name="info" />ブログ紹介</div>
結果を<select class="ccqas_showmax" name="ccqas_showmax">
<!-- 1 --><option value="5">5件ずつ</option>
<!-- 2 --><option value="10">10件ずつ</option>
<!-- 3 --><option value="20" selected>20件ずつ</option>
<!-- 4 --><option value="50">50件ずつ</option>
<!-- 5 --><option value="100">100件ずつ</option>
<!-- 6 --><option value="0">全て</option>
</select>表示
</form>
<script type="text/javascript">
<!--
cocoQAsearch.searchWordMin = 0 ; // 検索最小文字数制限(0:制限無し)
cocoQAsearch.showMax = 20 ; // 一度に表示する最大記事数のデフォルト値(カテゴリ毎)
cocoQAsearch.enableResize = true ; // 本文/コメント部のリサイズボタン表示有無(true:表示)
cocoQAsearch.initForm() ;
//-->
</script>
<style type="text/css">
<!--
.ccqas_notice {
text-align:left; font-size: x-small;
}
.ccqas_links {
text-align:left; font-size: x-small;
line-height: 140%; margin-bottom: 8px;
}
.ccqas_ol {
text-align: left;
}
.ccqas_li {
}
.ccqas_title {
}
.ccqas_user {
color: brown;
}
.ccqas_date {
padding-right: 8px;
}
.ccqas_body {
padding-bottom: 8px;
}
.ccqas_update {
text-align:right; font-size: smaller;
}
.ccqas_copyright {
text-align:right; font-size: smaller;
}
.ccqas_nav, .ccqas_nav_disable, .ccqas_resize_open, .ccqas_resize_close {
color: brown;
border: outset 1px silver;
text-align:center;
}
.ccqas_nav, .ccqas_nav_disable {
font-size: 10px; line-height: 120% ;
margin: 0px; padding: 2px 0px 2px 0px;
}
.ccqas_nav {
background-color: lightyellow;
}
.ccqas_nav_disable {
background-color: whitesmoke;
}
.ccqas_resize_form {
display: inline;
}
.ccqas_resize_open, .ccqas_resize_close {
float: right;
font-size: 9px;
margin: 0px 0px 0px 4px; padding: 2px 0px 0px 0px;
}
.ccqas_resize_open {
background-color: lightyellow;
}
.ccqas_resize_close {
background-color: lightcyan;
}
.ccqas_body {
word-break: break-all;
overflow: auto;
}
-->
</style>
<form name="ccqas_form" class="ccqas_form" action="javascript:cocoQAsearch.requestForm();">
<input type="text" name="search_box" class="search_box" value="" />
<input type="button" name="search_button" class="search_button" onclick="javascript:cocoQAsearch.requestForm(this.form);" value="検索" />
<div class="check_box"><input type="checkbox" name="debut" checked />はじめる前</div>
<div class="check_box"><input type="checkbox" name="beginner" checked />初級者向け</div>
<div class="check_box"><input type="checkbox" name="expert" checked />上級者向け</div>
<div class="check_box"><input type="checkbox" name="info" />ブログ紹介</div>
結果を<select class="ccqas_showmax" name="ccqas_showmax">
<!-- 1 --><option value="5">5件ずつ</option>
<!-- 2 --><option value="10">10件ずつ</option>
<!-- 3 --><option value="20" selected>20件ずつ</option>
<!-- 4 --><option value="50">50件ずつ</option>
<!-- 5 --><option value="100">100件ずつ</option>
<!-- 6 --><option value="0">全て</option>
</select>表示
</form>
<script type="text/javascript">
<!--
cocoQAsearch.searchWordMin = 0 ; // 検索最小文字数制限(0:制限無し)
cocoQAsearch.showMax = 20 ; // 一度に表示する最大記事数のデフォルト値(カテゴリ毎)
cocoQAsearch.enableResize = true ; // 本文/コメント部のリサイズボタン表示有無(true:表示)
cocoQAsearch.initForm() ;
//-->
</script>
各カテゴリで、指定した表示件数以上の記事にヒットした場合は、上下にナビが表示されますので、クリックして前後の検索結果に移動して下さい。 表示件数の初期値は20件です。Cookieが有効になっている場合、選択した表示件数を記憶し、次回からのデフォルト値として使用されます。
あと、ついでといってはなんですが、検索結果の本文／コメント概要の横の[+]をクリックすると、本文／コメント全体を見ることが出来るようになりました。
検索データ作成の都合上、改行などの情報が落ちてしまっていますが、実際の記事に移動することなく、おおよその内容をその場で確認出来るので、意外と便利なのではないかと思います。
とりあえず付けたかった機能は一通り搭載しました。公式版でも、最低限この程度の機能をつけてくださることを望みます(笑)＞ニフティさん
