閲覧ありがとうございます。
▼質問
初めてinputへ入力した時に限らず、
入力したものを全て消した後の書き直しなども含め
inputに入力するたび、発火させる方法
▼最終的につくりたいもの
「りんご」「りんごかな」「みかん」「パイナップル」といったp要素があり、
inputに「りんご」と入力された場合、
完全に一致、もしくは部分一致の「りんご」「りんごかな」は表示したままに、
それ以外の「みかん」「パイナップル」には、クラスhiddenを付け非表示にする。
▼問題点
現段階では、実現できているように見えますが、
「りんご」とinputに入力した後、
入力したテキストを一旦全て消し、
新たに「みかん」と打つと、
全く動作しなくなっている状況です。
▼コード
CodePen
参考サイト
javascriptで文字列内に任意の文字列が含まれているかをtrue/falseで返す
▼▼▼以下は、過去のコードと質問です▼▼▼
【2018/09/24のコード】
html
1 <body> 2 <div id="container"> 3[String.indexOfメソッド](https://algorithm.joho.info/programming/javascript/string-partial-match-js/)で文字列の部分一致を判定しようとしていますが、 4その箇所が上手くいっていません。 5 <form action="#"> 6 <input type="text" id="inputText" placeholder="文字を入力してください" onkeyup="addValue()"> 7 <input type="button" value="検索"> 8 </form> 9 <div id="inputTextPv"></div> 10 <div id="parent"> 11 <p>りんご</p> 12 <p>みかん</p> 13 <p>みかん</p> 14 <p>りんご</p> 15 <p>りんご</p> 16 <p>パイナップル</p> 17 </div> 18 </div> 19 <script> 20 // リアルタイムで入力された文字列を取得 21 function addValue(){ 22 var idname = "inputText"; 23 s = document.getElementById(idname).value; 24 var pvname = idname + "Pv"; 25 document.getElementById(pvname).innerHTML = s; 26 } 27 // 比較するp要素を取得 28 var parent = document.getElementById('parent'); 29 var child = parent.children; 30 console.log(child); 31 // 比較するp要素の文字列を取得 ※できない 32 console.log(child.textContents); //undefind 33 console.log(child.innerHTML); //undefind 34 // 入力された文字列とp要素の文字列を比較する ※できない 35 var result = child.search(search); 36 console.log(result); 37 </script> 38</body>
CSS
1/* container */ 2#container { 3 width: 520px; 4 margin: 100px auto; 5} 6/* form */ 7form { 8 font-size: 0; 9} 10input { 11 font-size: 1.4rem; 12 appearance: none; 13 height: 48px; 14} 15input:focus { 16 outline: none; 17} 18input[type="text"] { 19 width: 400px; 20 padding: 0 10px; 21} 22input[type="submit"] { 23 width: 80px; 24 border: none; 25} 26input[type="submit"]:hover { 27 opacity: 0.5; 28} 29/* リアルタイムで入力された文字を表示してみるエリア */ 30#inputTextPv { 31 border: 1px solid red; 32 height: 48px; 33 line-height: 48px; 34 padding: 0 10px; 35} 36/* p要素のエリア */ 37#parent { 38 border: 1px solid blue; 39 padding: 0 10px; 40}
【2018/09/24の修正に関する質問】
【実現したいこと】
ページ内検索で、検索した文字を含むp要素のみを表示し、それ以外のp要素は非表示にしたいです。
また、「検索」のボタンを押さずとも、入力した時点ですでに上記の状態となるようにしたいです。
※なるべくjQueryは使わず、ネイティブJSで作れると嬉しいです。
【現状】
●できていること
・検索のテキストボックスに入力された文字の取得
・p要素の取得
●できていないこと
・p要素の文字列の取得(これができないと、入力された文字列との比較は不可能?)
p要素の文字列を取得できそうに思える、.textContents と .innerHTML を試しましたが、どちらもundefindでした。他の方法も探したのですが、見つけることができませんでした。
・入力された文字列と、p要素の文字列の比較
p要素の文字列が取得できていないので、この段階まで辿り着けていないのですが、search を使うと検索をして一致した位置を「数値」で返してくれるとのことなので、その数値を使ってp要素の表示/非表示を切り替えられるのではないかと考えています。
・該当p要素の表示と、それ以外のp要素の非表示
display: block / none; でできるのではないかと考えています。
【2018/12/01のコード】
HTML
1<body> 2<div id="container"> 3 4<form action="#"> 5 <input type="text" id="inputText" placeholder="文字を入力してください"> 6 <input type="button" value="検索"> 7</form> 8<div id="inputTextPv" class="inputTextPv"></div> 9 10 <div id="parent"> 11 <p>りんご</p> 12 <p>みかん</p> 13 <p>みかん</p> 14 <p>りんご</p> 15 <p>りんご</p> 16 <p>パイナップル</p> 17 </div> 18 19 </div> 20<script> 21 (function () { 22 // parentのテキストたちを取得 23 const parent = document.getElementById('parent'); 24 const children = parent.children; 25 for (var child = 0; child < children.length; child++) { 26 // console.log(children[ child ].textContent); 27 child.dataset.value = children[ child ].textContent; 28 } 29 // inputに入力されたテキストをリアルタイムで取得 30 function addValue(e) { 31 var inputText = document.getElementById("inputText"); 32 inputText.addEventListener('keyup', function () { 33 var s = inputText.value; 34 document.getElementById("inputTextPv").textContent = s; 35 }, false); 36 } 37 // inputに入力されたテキストのdata-value属性に設定された値を検索 38 function searchText(text) { 39 return document.querySelectorAll(`[data-value="${text}"]`); 40 } 41 function getList() { 42 const e = document.getElementById('inputText').addEventListener('input'); 43 addValue(); 44 const nodeList = searchText(e.target.value); 45 // inputに入力されたテキストと同じテキストを持つparent内のp要素をConsoleに表示 46 console.log(nodeList); 47 } 48 })(); 49</script> 50</body>
【2018/12/01の修正に関する質問】
●parentのテキストたちを取得 について
ループでdata-value属性に自身のもつテキストノードの値を入れています。
IE11でも動作させたかったのでfor文を用いましたが、「value」に関してエラーが出ておりJSが動かない状態です。
どうすれば良いでしょうか?
エラー文:Uncaught TypeError: Cannot set property 'value' of undefined
●searchText について
HTML
1function searchText(text) {
とありますが、この(text)は何を示しているのでしょうか?
この()は宣言した変数を入れる場所であると思っていたのですが、宣言していない何かも入れることが可能なのでしょうか?
また、
HTML
1return document.querySelectorAll(`[data-value="${text}"]`);
の箇所でテンプレートリテラルを使用しておりますが、
このテンプレートリテラルを用いたdata-value属性を表す書き方を調べても、
同じ書き方が見つかりませんでした。
何かこのようなdata-value属性の書き方の、名称などはありますでしょうか?
●getList について
いただきましたアドバイスでは、アロー関数を使用されていましたが
よく分からなかったのでアロー関数ではない普通の書き方?にしてみました。
正しく書き換えられていますでしょうか?
●最後の行「 })();」 について
この行も、前述した「value」に関してのエラーの対象行のようです。
「JavaScriptは全体を即時関数で囲いつつ、
use strictキーワードで厳密なエラーチェックをすることが推奨されている。」
と知ったので、それも盛り込もうとしていますが、そのせいでしょうか?
こちらのエラーを解消するにはどうすれば良いでしょうか?
回答5件
あなたの回答
tips
プレビュー