検索ボックスを自動的に完成させる JavaScript 実装_JavaScript スキル

検索が必要な多くの Web サイトでは、ユーザーが必要な検索語を見つけるのに便利です。この方法は、より使いやすいものです。ですので、より ご利用いただくことをお勧めします。

今回はこのエフェクトを 2 つの記事で説明します。まず、インターフェイスのデザインとレイアウトを完成させます。

インターフェースの HTML 構造。最初のものは検索ボックス、2 つ目は検索クリック ボタンです。

 <div class="search">
     <input type="text" value="">
     <button>搜索</button>
 </div>

これは最も単純な検索ボックスのデザインです。以前は、Float を使用して処理し、検索ボックスに境界線を付けて、その境界線を削除しました。ここでは、フローティング効果を考慮する必要はありません。

.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 のコンテンツに追加します。次に、CSS コードを設定します。最小幅は、検索ボタンの幅を引いた値になります。ボックス。

.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;
}

これには、CSS コードの前にいくつかのデフォルトのブラウザ スタイルをクリアする必要があります。最終的な効果は次のとおりです。

それでは、JS コード コントロールを完成させましょう。

ユーザーが入力ボックスにテキストを入力すると、入力されたテキストがバックグラウンド データでクエリされ、クエリがクライアントに返され、返されたデータがデータ リストの下に表示されます。

この手順によると、まず入力ボックスのラベルを取得し、このラベルに onkeyup イベントを追加します

 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 によって実装された検索ボックスの自動補完効果です。
ご自身でテストできます。