Web サイトを閲覧すると、検索したいコンテンツを入力すると、以下にいくつかのプロンプトが表示されます。これを実現する方法を以下に説明します。それ！ この機能を書くとき、私は細部に非常にこだわります。注意しないと、ページにさまざまな違和感が現れます。
文字を入力するとき、まず効果を見てみましょう。入力ボックスに入力すると、対応するメッセージが後で表示されます。クリックするだけで、対応するドキュメント領域にリンクします。これは、サイトの検索とナビゲーションに非常に適しています。
完全なテスト コードを以下に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form" name="form">
搜索:<input type="text" name="input1">
</form>
<p id="wrap" style="width: 100;height: 100px;border: 1px solid black;"></p>
<script type="text/javascript">
var form = document.getElementById("form");
var input1 = document.forms["form"]["input1"];
var wrap = document.getElementById("wrap");
var arr1 = [" 我爱中国"," 我爱美国"," 我爱英国"," 我天生神力"];//数组里面的元素就是我希望在输入宽输入某个字符后在下方出现的搜索字符。
var arr2 = [];//这个数组是为了装入经过筛选和匹配符合要求的arr1中的元素。例如输入值为"我"，arr1中的4个元素都出现。输入"我爱"，则出现前三个。出现的元素都要装入到arr2中方便后面依据数组中的元素创建元素。
input1.oninput = function() {//添加input监控，这样我们可以随时感知输入框值的变化
var val = input1.value;//获取当前输入框的值。
arr2 = [];//使得每次输入框值变化后数组arr2为空。不然每改变一次值就创建一次元素而不删除的话，wrap中添加的元素会越来越多。
/*清掉wrap里面的所有p元素。这里要注意一个问题，很重要。我们在获取wrap内的p元素的时候要注意以下几个问题:
1.getElementsByTagName("p");返回的是一个数组而不是一个元素，不能直接通过remove()删除;
2.使用querySelectorAll("p")获取p元素，使用for循环删除所有p元素不能按照以下方式写:
for (var k = 0; k < p1.length; k++) {
p1[k].remove();
};
因为将数组内的元素从下标为0的元素开始删除，每删除一个，删除前下标为1的元素就会自动下标为0的位置。这样通过上面的循环并不能将wrap中的元素删除干净。
你可以这样写:
for (var k = p1.length-1; k >= 0; k--) {
p1[k].remove();
};
或者不要通过getElementsByTagName("p")这种方式获取元素，而是通过querySelectorAll("p")就不会出现上面的问题。
*/
var p1 = wrap.getElementsByTagName("p");
// var p1 = wrap.querySelectorAll("p");
for (var k = p1.length-1; k >= 0; k--) {
p1[k].remove();
};
//indexOf用来查看arr1中的每个元素是否包含输入款的字符。包含则返回第一个下标，不包含则返回-1.这里要注意输入框中的值为空时返回的0，输入第一个字符为"我"也返回0，这时如果用(arr1[i].indexOf(val) > -1为条件，输入框为空时也会在wrap内生成p元素。所以我在arr1数组元素字符串第一个位置加一个空格，这样输入第一个字符为"我"返回1，再将条件变为arr1[i].indexOf(val) > 0
for (var i = 0; i < arr1.length; i++) {
if (arr1[i].indexOf(val) > 0 ) {
// console.log(val);
arr2.push(arr1[i]);
}
//创建元素的循环。在每个创建的元素内添加arr2数组中的字符串。
for (var j = 0; j < arr2.length; j++) {
var p = document.createElement("p");
var a = document.createElement("a");
a.innerText = arr2[j];
a.setAttribute("href","http://www.baidu.com");
p.appendChild(a);
wrap.appendChild(p);
}
}
</script>
</body>
</html>3 にイベントを追加すると、検索値がどのように表示され、入力値
の演習
も一緒に行うことができます。
。
このようにして、重複した要素が配列 arr2 に追加されなくなります。
5. 次に、要素が依然として繰り返し表示される理由がわかります。これは要素の残留問題です。つまり、前の要素が削除されません。変更を行うたびに、ラップ内に作成された要素を削除する必要があります。削除しないと、要素はまだ存在します。これは、 getElementsByTagName() を使用して要素を取得し、削除します。
6. 一般的な機能は完了し、その後、いくつかの細かい作業が行われますが、これらの細かい作業が時間を無駄にします。
1 つは、入力ボックスの値が空の場合にも検索値が表示されることです。 arr1[i].indexOf(val) は 0 または -1 より大きいですか? null 値の戻り値も 0 であることがわかり、要素を作成するコードも実行されるため、それぞれの前にスペースを追加しました。 arr1 の文字列。
もう 1 つは、getElementsByTagName() を使用して要素を取得するときに注意すべき重要な点です。私はこの問題に長い間悩まされてきました。上記のコード領域について詳しく説明します。
JavaScript検索自動プロンプト機能の実装
以上がjs は Web 検索ボックスにキーワード プロンプトを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
