검색창 자바스크립트 구현_javascript 기술 자동 완성

검색해야 하는 많은 웹사이트에는 자동완성 검색창이 있어 사용자가 원하는 검색어를 쉽게 찾을 수 있습니다. 이 방법이 더 친숙합니다. . 그래서 더욱 사용하시는 걸 추천드려요.

이번에는 이 효과를 달성하기 위해 두 가지 기사를 통해 먼저 인터페이스의 디자인과 레이아웃을 완성하겠습니다.

인터페이스의 HTML 구조로, 첫 번째는 검색창이고, 두 번째는 검색 클릭 버튼입니다.

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

이것은 CSS 코드를 처리하는 가장 간단한 방법입니다. 과거에는 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 콘텐츠에 추가합니다. 그런 다음 최소 너비를 .search 너비에서 검색 버튼 너비를 뺀 값으로 설정합니다. 상자.

.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"];

백그라운드 데이터를 사용할 수 있고 이벤트가 추가되었습니다.

첫 번째는 입력 데이터를 얻은 후 배경 데이터와 비교한 다음 비교된 데이터를 데이터에 저장하는 것입니다.

//定义一些数据
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에서 구현한 검색창 자동완성 효과입니다.