Lengkapkan kemahiran javascript implementation_javascript kotak carian secara automatik

Dalam banyak tapak web yang perlu dicari, akan ada kotak carian yang lengkap secara automatik. Ia memudahkan pengguna mencari istilah carian yang mereka inginkan dengan cepat . Jadi ia adalah lebih Adalah disyorkan untuk digunakan.

Kami akan mencapai kesan ini kali ini Kami akan menerangkannya melalui dua artikel Pertama, kami akan melengkapkan reka bentuk dan reka letak antara muka.

Struktur HTML antara muka, yang pertama ialah kotak carian dan yang kedua ialah butang klik carian.

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

Ini adalah reka bentuk kotak carian yang paling mudah Cara menangani kod CSS Pada masa lalu, apungan digunakan untuk pemprosesan, dan kemudian kotak carian diberi sempadan dan padding telah ditetapkan butang dan padding telah ditetapkan

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

Pada masa ini kami terus memikirkannya Jika pengguna memasukkan kata kunci, senarai perkataan yang berkaitan mesti dipaparkan. Kemudian kami perlu menambah senarai perkataan pada masa ini.

Contohnya

<ul>
  <li><a href="#">武林外传</a> </li>
  <li><a href="#">葵花宝典</a> </li>
  <li><a href="#">如来佛掌</a> </li>
  <li><a href="#">九阴白骨爪</a> </li>
</ul>

Kami menambahkan baris kod ini pada kandungan .search Kemudian tetapkan kod CSSnya Kami menetapkan lebar minimumnya kepada lebar .search tolak lebar butang carian kotak.

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

Ini memerlukan mengosongkan beberapa gaya penyemak imbas lalai sebelum kod CSS Kesan akhir adalah seperti berikut.

Baiklah. Sekarang mari kita lengkapkan kawalan kod JS.

Mari kita menganalisis peristiwa Selepas pengguna memasukkan teks dalam kotak input, teks yang dimasukkan ditanya dengan data latar belakang Selepas pertanyaan diperoleh, ia dikembalikan kepada klien, dan kemudian data yang dikembalikan dipaparkan di bawah senarai data.

Mengikut langkah ini, kami mula-mula mendapatkan label kotak input dan menambah acara onkeyup pada label ini

 var ele_key = document.getElementById("key");
 ele_key.onkeyup = function (e) {
   //处理事件
 }

Di sini kami mensimulasikan data latar belakang, diwakili di sini oleh data, dan kemudian menambah beberapa data

var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];

Data latar belakang tersedia dan acara ditambahkan Sekarang kami memproses data.

Yang pertama adalah untuk mendapatkan data input, kemudian bandingkan dengan data latar belakang, kemudian simpan data yang dibandingkan dalam data.

//定义一些数据
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]);
    }
  }

 }

Teruskan menganalisis Pada masa ini, selepas kami memperoleh data yang ditanya di latar belakang, kami perlu memaparkan data ini kepada pengguna untuk dilihat di sini.

//定义一些数据
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);
  }

 }

Apabila menambahkan data pada senarai, kami mula-mula memulakan senarai data untuk mengelakkan penambahan data pendua. Kedua, kami menambah acara klik pada setiap baris senarai data, dan meletakkan data ke dalam kotak carian selepas mengklik senarai data disembunyikan.

Seluruh kotak carian autolengkap selesai di sini. Mari kita uji kesannya.

Ini mungkin masalah dengan perisian rakaman Jidar harus sama dengan warna latar belakang yang dirakamkan. Jidar tiada (⊙﹏⊙)b

Di atas ialah kesan penyiapan automatik kotak carian yang dilaksanakan oleh JAVASCRIPT Anda boleh mengujinya sendiri