下記の参考サイトを元に、文字列をリアルタイムで検索して、
ハイライトするページを作成したのですが、検索結果がうまく表示されません。
参考にしたサイト
検索を行った場合、
項目が下記のように配置されているため、「あ」と検索した場合、
結果が2段になって表示されてしまいます。
おそらく原因は1段ごとに<ul>で囲っているためだと思い、
段ごとではなく、全体をulタグで囲ったのですが、
その場合、検索前からレイアウトが崩れてしまいます。
検索を行った際に、検索結果が検索前のような配置で、ヒットした項目を横並びで表示したいです。また、結果が4項目以上の場合は2段目になるように並べて表示したいです。
宜しくお願い致します。
<ul>を4項目ごとに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
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>⇒項目1<br />⇒項目2<br />⇒項目3</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>⇒項目1</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>⇒項目1</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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/06/16 02:57
2017/06/16 03:02
退会済みユーザー
2017/06/16 04:10
退会済みユーザー
2017/06/16 05:34
2017/06/16 05:37