ホームページ > 記事 > ウェブフロントエンド > 検索ボックスを自動的に完成させる JavaScript 実装_JavaScript スキル
検索が必要な多くの Web サイトでは、ユーザーが必要な検索語を見つけるのに便利です。この方法は、より使いやすいものです。ですので、より ご利用いただくことをお勧めします。
今回はこのエフェクトを 2 つの記事で説明します。まず、インターフェイスのデザインとレイアウトを完成させます。
インターフェースの HTML 構造。最初のものは検索ボックス、2 つ目は検索クリック ボタンです。
<div class="search"> <input type="text" value=""> <button>搜索</button> </div>
.search { display: inline-flex; height: 35px; margin: 50px auto; position: relative; } .search input { border: #eee 1px solid; background-color: #fff; outline: none; width: 200px; padding: 0 5px; } .search button { background-color: #ff3300; color: #fff; border: none; width: 80px; }
たとえば
<ul> <li><a href="#">武林外传</a> </li> <li><a href="#">葵花宝典</a> </li> <li><a href="#">如来佛掌</a> </li> <li><a href="#">九阴白骨爪</a> </li> </ul>
.search ul { position: absolute; left: 0; top: 35px; border: #eee 1px solid; min-width: calc(100% - 80px); text-align: left; } .search ul a { display: block; padding: 5px; }
それでは、JS コード コントロールを完成させましょう。
ユーザーが入力ボックスにテキストを入力すると、入力されたテキストがバックグラウンド データでクエリされ、クエリがクライアントに返され、返されたデータがデータ リストの下に表示されます。
var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { //处理事件 }
var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];
1 つ目は、入力データを取得し、それをバックグラウンド データと比較し、比較したデータをデータに保存します。
//定义一些数据 var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"]; var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { var val = this.value; //获取输入框里匹配的数据 var srdata = []; for (var i = 0; i < data.length; i++) { console.log(data[i].indexOf(val)) if (val.trim().length > 0 && data[i].indexOf(val) > -1) { srdata.push(data[i]); } } }
//定义一些数据 var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"]; var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { var val = this.value; //获取输入框里匹配的数据 var srdata = []; for (var i = 0; i < data.length; i++) { console.log(data[i].indexOf(val)) if (val.trim().length > 0 && data[i].indexOf(val) > -1) { srdata.push(data[i]); } } //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示 var ele_datalist = document.getElementById("datalist"); ele_datalist.style.visibility = "visible"; ele_datalist.innerHTML = ""; if (srdata.length == 0) { ele_datalist.style.visibility = "hidden"; } //将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏 var self = this; for (var i = 0; i < srdata.length; i++) { var ele_li = document.createElement("li"); var ele_a = document.createElement("a"); ele_a.setAttribute("href", "javascript:;"); ele_a.textContent = srdata[i]; ele_a.onclick = function () { self.value = this.textContent; ele_datalist.style.visibility = "hidden"; } ele_li.appendChild(ele_a); ele_datalist.appendChild(ele_li); } }
ここでオートコンプリート検索ボックス全体が完成しました。効果をテストしてみましょう。
これは録画ソフトウェアに問題がある可能性があります。枠線は録画された背景と同じ色であるはずです。枠線がありません (⊙﹏⊙)b
。
上記は、JAVASCRIPT によって実装された検索ボックスの自動補完効果です。
ご自身でテストできます。