表題の通りなのですが、javascriptなどで実現可能でしょうか？ http://g5187066.k-free.net/ 【ソース】あいうえおかきくけこさしすせそたちつていうえとなにぬねの上記のようなhtmlページがあり、例えば「いうえ」とフォームから検索したら１番目の要素と４番目の要素が表示され、そのほかの要素は hidden になるようなイメージです。ヒットする文字列を含む要素以外にjavascriptでクラスを付与させ、そのクラスのスタイルに display:none; などのスタイルを当てることで実現できそうな気はするのですが、どう書けばよいのか全然わからず、もしもご存知の方がいらっしゃいましたらご教授いただければ非常に助かります… もしくは上記のようなことが実現できるjqueryのプラグインなどが存在するのであればこちらもご教授いただければ非常に助かります… 結構探したのですが見つかりませんでした。。(>_<)

つらい・・・

同一ページ内で、任意の文字列検索→検索にヒットした<li>要素を表示（それ以外は非表示）させる方法

解決済

質問者：g2524870
質問日時：2015/08/10 15:27
回答数：2件

表題の通りなのですが、javascriptなどで実現可能でしょうか？

http://g5187066.k-free.net/
【ソース】
<body>
　<div>
　　<input type="text">
　　<input type="submit" value="検索">
　</div>
　<ul>
　　<li>あいうえお</li>
　　<li>かきくけこ</li>
　　<li>さしすせそ</li>
　　<li>たちつていうえと</li>
　　<li>なにぬねの</li>
　</ul>
</body>

上記のようなhtmlページがあり、例えば
「いうえ」とフォームから検索したら１番目の<li>要素と４番目の<li>要素が表示され、そのほかの<li>要素は hidden になるようなイメージです。

ヒットする文字列を含む<li>要素以外にjavascriptでクラスを付与させ、そのクラスのスタイルに display:none; などのスタイルを当てることで実現できそうな気はするのですが、どう書けばよいのか全然わからず、もしもご存知の方がいらっしゃいましたらご教授いただければ非常に助かります…

もしくは上記のようなことが実現できるjqueryのプラグインなどが存在するのであればこちらもご教授いただければ非常に助かります…

結構探したのですが見つかりませんでした。。(>_<)

うわぁ～(>o<;;)
すごいですね…
サラサラーと…（；´Д｀）
ありがとうございます！

これで全然問題ないのですがキーワード入れてエンターでは動かないものなんですか？

No.1の回答に寄せられた補足コメントです。補足日時：2015/08/10 17:32
通報する

通報する

この質問は特に20代・女性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2015/08/10 18:29

エンターはsubmitですからねぇ・・・

trimなど一部仕様外を含めバグっていたのをなおして
こんな感じでどうでしょうか？

<style>
li.hide{display:none;}
</style>
<script>
try{
document.addEventListener('keypress',function(e){pressfunc(e)},true);
}catch(e){
document.attachEvent('onkeypress',function(e){pressfunc(e)});
}
function pressfunc(e){
var t = (e.srcElement || e.target);
if(e.keyCode==13 && t.name=="keyword"){
searchword();
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
}
function searchword(){
var v=document.getElementById("keyword").value;
var n1=document.getElementById("wordlist");
var n2=n1.getElementsByTagName("li");
for(var i=0;i<n2.length;i++){
var cn=n2[i].className;
cn=cn.replace(/(^|\s)hide(\s|$)/,"");
if(! n2[i].innerHTML.match(new RegExp(v))){
n2[i].className=(cn+(cn==""?"":" ")+"hide");
}else{
n2[i].className=cn;
}
}
}
</script>
<form>
<input type="text" name="keyword" id="keyword" value="いうえ">
<input type="button" value="検索" onclick="searchword()">
</form>
<ul id="wordlist">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつていうえと</li>
<li>なにぬねの</li>
</ul>