文字列をリアルタイム検索してハイライトするJavascript

下記の参考サイトを元に、文字列をリアルタイムで検索して、
ハイライトするページを作成したのですが、検索結果がうまく表示されません。
参考にしたサイト

検索を行った場合、
項目が下記のように配置されているため、「あ」と検索した場合、
結果が２段になって表示されてしまいます。

おそらく原因は１段ごとに<ul>で囲っているためだと思い、
段ごとではなく、全体をulタグで囲ったのですが、
その場合、検索前からレイアウトが崩れてしまいます。

検索を行った際に、検索結果が検索前のような配置で、ヒットした項目を横並びで表示したいです。また、結果が４項目以上の場合は２段目になるように並べて表示したいです。
宜しくお願い致します。

html
1//各項目の配置
2<ul>
3<li>1あ</li>
4<li>2あ</li>
5<li>3</li>
6<li>4</li>
7</ul>
8<ul>
9<li>5あ</li>
10<li>6</li>
11<li>7</li>
12<li>8</li>
13</ul>
14

<ul>を４項目ごとに

html
1//ulタグを全体囲みに変更[レイアウト崩れる]
2<ul>
3<li>1あ</li>
4<li>2あ</li>
5<li>3</li>
6<li>4</li>
7<li>5あ</li>
8<li>6</li>
9<li>7</li>
10<li>8</li>
11</ul>
12

↓現状のCSS、javascript、htmlです。

CSS
1<style type="text/css">
2/* <![CDATA[ */
3.conteiner
4			{
5				width: 100%;
6				max-width: 585px; /* 960 */
7				margin: 0 auto;
8			}
9
10
11			.container p
12			{
13				line-height: 1.6;
14			}
15			.faq input
16			{
17				width: 100%;
18				font-size: 20px;
19				display: block;
20				padding: 0 20px;
21				margin-bottom: 40px;
22			}
23
24			.faq .highlight
25			{
26				background-color: #fffd77;
27			}
28
29				.faq > ul > li.is-hidden
30				{
31					display: none;
32				}
33					.faq > ul > li h2
34					{
35						font-size: 24px;
36					}
37						.faq > ul > li h2:hover,
38						.faq > ul > li h2:focus,
39						.faq > ul > li.is-active h2,
40						.faq > ul > li:target h2
41						{
42							color: #a664b7;
43						}
44	
45					.faq > ul > li.is-active > div,
46					.faq > ul > li:target > div
47					{
48						display: block;
49						margin-top: 10px;
50
51					}
52
53				.faq__notfound
54				{
55					font-size: 20px;
56					display: none;
57				}
58				.faq__notfound.is-visible
59				{
60					display: block;
61				}
62/* ]]> */
63</style>

JavaScript
1<script type='text/javascript'>
2$(window).load(function(){
3
4'use strict';
5
6	// search & highlight
7	;( function( $, window, document, undefined )
8	{
9		var $container = $( '.faq' );
10		if( !$container.length ) return true;
11
12		var $input			= $container.find( 'input' ),
13			$notfound		= $container.find( '.faq__notfound' ),
14			$items			= $container.find( '> ul > li' ),
15			$item			= $(),
16			itemsIndexed	= [];
17
18		$items.each( function()
19		{
20			itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );
21		});
22
23		$input.on( 'keyup', function( e )
24		{
25			if( e.keyCode == 13 ) // enter
26			{
27				$input.trigger( 'blur' );
28				return true;
29			}
30
31			$items.each( function()
32			{
33				$item = $( this );
34				$item.html( $item.html().replace( /<span class="highlight">([^<]+)<\/span>/gi, '$1' ) );
35			});
36
37			var searchVal = $.trim( $input.val() ).toLowerCase();
38			if( searchVal.length )
39			{
40				for( var i in itemsIndexed )
41				{
42					$item = $items.eq( i );
43					if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
44						$item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^<]+)?>)', 'gi' ), '<span class="highlight">$&</span>' ) );
45					else
46						$item.addClass( 'is-hidden' );
47				}
48			}
49			else $items.removeClass( 'is-hidden' );
50
51			$notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );
52		});
53	})( jQuery, window, document );
54
55}); 
56
57</script>

html
1<body>
2 <div class="contentes">
3<div class="faq">
4<p align="center"><input type="search" value="" placeholder="検索するキーワードを入力" /></p>
5<ul style="overflow: hidden;">
6<li id="faq-1" style="width: 150px; float: left;">
7<div>
8<p><strong>項目大1</strong></p>
9</div>
10</li>
11<li id="faq-2" style="width: 150px; float: left;">
12<div>
13<p><strong>項目大2</strong></p>
14</div>
15<p>⇒項目１<br />⇒項目２<br />⇒項目３</p>
16</li>
17<li id="faq-3" style="width: 150px; float: left;">
18<div>
19<p><strong>項目大3</strong></p>
20</div>
21</li>
22<li id="faq-1" style="width: 150px; float: left;">
23<div>
24<p><strong>項目大4</strong></p>
25</div>
26</li>
27</ul>
28<ul style="overflow: hidden;">
29<li id="faq-2" style="width: 150px; float: left;">
30<div>
31<p><strong>項目大5</strong></p>
32</div>
33<p>⇒項目1<br />⇒項目2<br />⇒項目3</p>
34</li>
35<li id="faq-3" style="width: 150px; float: left;">
36<div>
37<p><strong>項目大6</strong></p>
38</div>
39<p>⇒項目１</p>
40</li>
41<li id="faq-2" style="width: 150px; float: left;">
42<div>
43<p><strong>項目大7</strong></p>
44</div>
45<p>⇒項目1<br />⇒項目2<br />⇒項目3</p>
46</li>
47<li id="faq-3" style="width: 150px; float: left;">
48<div>
49<p><strong>項目大8</strong></p>
50</div>
51<p>⇒項目１</p>
52</li>
53</ul>
54<ul style="overflow: hidden;">
55<li id="faq-1" style="width: 150px; float: left;">
56<div>
57<p><strong>⇒項目9</strong></p>
58</div>
59</li>
60</ul>
61<div class="faq__notfound">
62<p>商品 / キーワードが見当たりません。他のキーワードをお試し下さい</p>
63</div>
64</div>
65</body>

行動規範の内容に同意します

回答1件

ベストアンサー

＞修正、CSSのみでは対応できないので以下のように変更しました。
1.ulのliを1つのUlで囲む
2.5つ目ごとのliにクラス名 _clear を追加 ※ここは最初にスクリプトで行ってもよいかもです
3.隠す際に _clear をremoveClass
4.表示する際に _clear をaddClass

レスポンシブ等は別途CSS定義必須。

あと本来重複してはいけないid属性の値に重複があるのでそれは改めた方がいいかと。

CSS
1    ._clear{
2        clear: both;
3    }

javascript
1if (searchVal.length) {
2	var visibleCount = 0;
3	var clearNumber = 4;
4	for (var i in itemsIndexed) {
5		$item = $items.eq(i);
6		$item.removeClass('_clear');
7		if (itemsIndexed[i].indexOf(searchVal) != -1){
8			$item.removeClass('is-hidden').html($item.html().replace(new RegExp(searchVal + '(?!([^<]+)?>)', 'gi'), '<span class="highlight">$&</span>'));
9			if((visibleCount) % clearNumber==0){
10				$item.addClass('_clear');
11			}
12			visibleCount++;
13		}else{
14
15			$item.addClass('is-hidden');
16		}
17
18	}
19}
20else{
21	$items.removeClass('is-hidden');
22	$items.removeClass('_clear');
23}
24

投稿2017/06/16 02:01

編集2017/06/16 04:45

kanimaru

総合スコア1013

退会済みユーザー

2017/06/16 02:57

迅速な解答ありがとうございます。 ①ulのliを1つのUlで囲む⇒<ul><li>1</li><li>2</li>....</ul>> に変更 ②全てのliにクラス名 visible を追加⇒id=をclassに変更し、<li class="visible" class="faq-1" style="width: 150px; float: left;">に変更。 ③④の記述の仕方を詳しく教えていただけたら幸いです。