アプリ版：「スタンプのみでお礼する」機能のリリースについて

つらい・・・

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

解決済

  • 質問者：g2524870
  • 質問日時：
  • 回答数：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代・女性の方に
リクエストされています！
(回答を制限するものではありません。)

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

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： yambejp
  • 回答日時：

なんの工夫もなくいわれた通り書くとこんな感じ？



<style>
li.hide{display:none;}
</style>
<script>
function searchword(obj){
var v=obj.form.elements["keyword"].value;
var n1=document.getElementById("wordlist");
var n2=n1.getElementsByTagName("li");
for(var i=0;i<n2.length;i++){
var reg=new RegExp("(^| )hide( |$)");
var cn=n2[i].className;
cn=cn.replace(reg,"");
if(!n2[i].innerHTML.match(v)){
n2[i].className=(cn+" hide").trim();
}else{
n2[i].className=cn;
}
}
}
</script>
<form>
<input type="text" name="keyword" value="いうえ">
<input type="button" value="検索" onclick="searchword(this)">
</form>
<ul id="wordlist">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつていうえと</li>
<li>なにぬねの</li>
</ul>
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2015/08/10 18:24

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

エンターは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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

もう何というか、完璧にこれです…。
なんかもう本当に（ ﾟДﾟ）←です…。
これだけスラスラとjavascriptなどを取りまわせる神様になりたいです…。
本当にありがとうございました（；´Д｀）！

通報する
お礼日時：2015/08/11 12:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報