👨‍💻 순수 자바스크립트로 자동 완성 입력 상자 만들기 🔥🔥

13131 단어 tutorial webdev beginners javascript

안녕하세요 여러분, 잘 지내고 있고 이 검역 기간 동안 새로운 것을 배우려고 노력하고 있기를 바랍니다. 나는 내가 가진 모든 자유 시간으로 블로그를 쓰기 시작했습니다. 인도 봉쇄령 때문이다.

그래서 이번 포스팅에서는 자동완성 기능으로 간단한 검색을 코딩하는 방법에 대해 알아보도록 하겠습니다. 우리는 이것에 대한 백엔드를 다루지 않을 것입니다. 나는 그것을 위해 다른 블로그를 쓸 것입니다. 그럼 시작하겠습니다...

아래는 우리가 만들려는 것의 예입니다.

먼저 다음과 같이 간단한 앱의 HTML을 입력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="index.css"/>
</head>
<body>
   <div class="container">
        <div class="search-container">
           <input type="text" onkeyup="filterNames(event)">
       </div>
       <ul class="list-container" id ="list-container">
           <li>Kushal Sharma</li>
       </ul>
   </div>
</body>
<script src="index.js"></script>
</html>

이제 약간의 CSS로 앱의 스타일을 지정해 보겠습니다.

*{
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;
}
.container{
   margin-top: 25px;
   margin-left:auto;
   margin-right: auto;
   min-height: 500px;
   width: 80%;
   border: 1px solid black;
}
.search-container{
   width: 100%;
}
.search-container input{
   width: 100%;
   height: 40px;
   font-size: 25px;
}

.list-container li{
   list-style: none;
   border: 1px solid red;
   padding: 15px 15px;
   font-size: 25px;
}

이제 앱은 다음과 같습니다.

이 아주 적은 양의 스타일 지정은 자동 완성 기능을 수행하는 데 적합합니다. 이제 자동 완성 프로세스입니다. 입력한 문자와 일치하는 레코드를 필터링해야 합니다. 이를 위해 JSON을 사용하여 해당 레코드를 배열에 저장할 것입니다.

다음으로 index.js로 저장된 새 파일을 만들고 다음 코드를 입력해 보겠습니다.

const names = [
   {
       name:"kushal sharma",
   },
   {
       name:"Jeremy",
   },
   {
       name:"john",
   },
   {
       name:"sandeep",
   },
   {
       name:"mohit",
   },
   {
       name:"sanjeev",
   },
   {
       name:"maininder",
   },
   {
       name:"Ajay",
   }
]

(' name = [“kushal”,”jeremy”,”john”,”sachin”] '과 같은 간단한 배열 리터럴도 작동할 수 있지만 저는 JSON을 사용하는 것을 선호합니다).

index.html 파일을 열 때 이름을 표시하여 이름을 필터링할 수 있기를 원합니다. 이렇게 하려면 각 이름을 HTML DOM 요소로 만들어야 합니다. 함수를 사용하여 이름을 DOM 요소로 변환하고 다음과 같이 UI에 표시합니다.

function renderNames(arrayOfNames) {
   let liElemet = "" ;
   for (let i= 0; i <arrayOfNames.length; i++) {
   liElemet += `<li>${arrayOfNames[i].name}</li>`
   }
   document.getElementById("list-container").innerHTML= liElemet;
}

그래서 여기서 우리는 이전에 생성한 이름의 배열로 구성된 arrayOfNames 인수를 받아들이는 renderNames 함수를 만들었습니다.

이 코드 줄에서 목록을 만들고 있습니다.

요소 안에 이름을 하나씩 적는다.

liElemet += `<li>${arrayOfNames[i].name}</li>`

일단 우리는 모든

이름의 요소 우리는 순서가 지정되지 않은 목록 요소인 목록 컨테이너의 자식으로 이 모든 항목을 추가하도록 자바스크립트에 지시합니다.

이제 다음과 같은 이름 배열을 전달하여 이 함수를 호출해야 합니다.

renderNames(names);

이제 모든 이름 목록을 볼 수 있습니다.

다음으로 주요 기능에 대해 작업합니다. 먼저 입력하는 내용을 파악해야 합니다. 이를 위해 JavaScript 코드와 함께 HTML 이벤트를 사용합니다. 브라우저 창에서 변경이 발생할 때마다 이벤트입니다. 키를 누르면 이벤트입니다. 마우스를 이동하고 창 크기를 조정하는 것도 이벤트입니다. 따라서 검색을 수행하는 중이므로 키보드 키 누르기 이벤트를 처리해야 합니다.

<input type="text" onkeyup="filterNames(event)">

여기에 onkeyup 속성을 추가했으며 filterNames() 함수를 호출하고 이벤트를 인수로 전달합니다. 이벤트 인수에는 이벤트에 대한 모든 정보, 이벤트가 발생한 위치, 대상 요소, 값 등이 포함됩니다.

이제 filterNames() 함수를 만들어 보겠습니다.

function filterNames(event) {
   var searchvalue = event.target.value;
   var filterNames = names.filter((v,i)=>{
       return(v.name.includes(searchvalue));
   })
   renderNames(filterNames);
}

filterNames() 함수 내에서 "event.target.value "를 사용하여 어떤 키가 눌렸는지 파악한 다음 배열의 이름을 통해 필터링하고 입력된 문자를 포함하는 이름만 반환합니다. 그런 다음 filter() 메서드에서 반환된 새 이름 배열로 renderNames() 함수를 다시 호출합니다.

이제 검색 예제에서 "sa"라는 문자를 입력했을 때 "sandeep"과 "sanjeev"라는 두 개의 이름이 반환되었으며 둘 다 "sa"라는 문자를 포함하고 있음을 알 수 있습니다.

만세! 순수 JavaScript로 자동 완성 기능으로 검색을 만들었습니다!

나는 당신이 이것을 좋아하기를 바랍니다. 질문이 있으면 의견에 적어주십시오. twitter에서 나를 팔로우 ⇒ 내가 매일 작업하고 있는 것을 확인하세요.

그리고 내가 새 블로그를 게시할 때 알림을 받으려면 Dev에서 나를 팔로우할 수도 있습니다.

Reference

이 문제에 관하여(👨‍💻 순수 자바스크립트로 자동 완성 입력 상자 만들기 🔥🔥), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sharmakushal/make-autocomplete-input-box-in-pure-javascript-3p3h

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

POI 2007 Excel 파일 읽기

NPOI는 여러 dt 데이터를 EXCEL의 다중 시트로 가져옵니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다