일반 Javascript로 자동 완성 입력을 만드는 방법

17291 단어 programmingwebdevjavascript
이제 웹 사이트를 구축한 대부분의 사람들은 양식을 포함했습니다. 일반 텍스트 요소, 숫자, 선택(드롭다운), 확인란 및 라디오 버튼.

문제



내가 자주 접하는 상황은 사용자가 매우 긴 옵션 목록에서 선택해야 하는 경우입니다. 가장 쉬운 방법은 모든 옵션을 선택 요소에 넣는 것입니다. 그러나 이것은 실용적이지 못하기 때문에...
  • 매우 끔찍한 사용자 환경을 만들 수 있습니다
    • .
  • 모든 옵션이 매우 큰 경우(예: 수천 개) 이 모든 옵션을 선택 옵션에 로드할 실질적인 이유가 없습니다.

    • 해결책



    자동 완성 양식. 거대한 목록을 가지고 사용자와 관련된 항목만 표시할 수 있습니다. 모든 결과를 HTML로 로드할 필요가 없으며 사용자가 입력할 때 필요한 결과를 로드하기만 하면 됩니다.



    이것은 선택할 수 있는 옵션이 많은 많은 웹사이트에서 사용되는 기술입니다. 전자 상거래, 시장, 광고, 소셜 미디어 등

    특히 와 같은 라이브러리의 경우 구현이 복잡해 보일 수 있지만 실제로는 다소 간단합니다.

    구현



    먼저 html 요소


    index.html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Demo auto complete
    </title>
</head>
<body>
    <h2>The form</h2>
    <form>
        <input type="text" name="name" id="name_input">Name
        <br/>
        <input type="submit">
    </form>
</body>
</html>


    자동 완성 양식을 만들기 위해 HTML5 datalist 태그를 사용할 것이므로 다음과 같이 수정합니다.
    index.html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Demo auto complete
    </title>
</head>
<body>
    <h2>The form</h2>
    <form>
        <input type="text" name="name" id="name_input" list="huge_list">Name
        <datalist id="huge_list">
        </datalist>
        <br/>
        <input type="submit">
    </form>
</body>
</html>


    AJAX로 자동 완성하는 Javascript



    우리가 할 일은 사용자가 필드에 입력할 때마다 확인하고 필요한 것만으로 데이터 목록 요소를 채우는 것입니다. 코드에 주석이 추가되었습니다.
    index.js
    window.addEventListener("load", function(){

    // Add a keyup event listener to our input element
    var name_input = document.getElementById('name_input');
    name_input.addEventListener("keyup", function(event){hinter(event)});

    // create one global XHR object 
    // so we can abort old requests when a new one is make
    window.hinterXHR = new XMLHttpRequest();
});

// Autocomplete for form
function hinter(event) {

    // retireve the input element
    var input = event.target;

    // retrieve the datalist element
    var huge_list = document.getElementById('huge_list');

    // minimum number of characters before we start to generate suggestions
    var min_characters = 0;

    if (input.value.length < min_characters ) { 
        return;
    } else { 

        // abort any pending requests
        window.hinterXHR.abort();

        window.hinterXHR.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                // We're expecting a json response so we convert it to an object
                var response = JSON.parse( this.responseText ); 

                // clear any previously loaded options in the datalist
                huge_list.innerHTML = "";

                response.forEach(function(item) {
                    // Create a new <option> element.
                    var option = document.createElement('option');
                    option.value = item;

                    // attach the option to the datalist element
                    huge_list.appendChild(option);
                });
            }
        };

        window.hinterXHR.open("GET", "/query.php?query=" + input.value, true);
        window.hinterXHR.send()
    }
}


    서버에서 JSON 형식의 값 배열을 수신하고 반환합니다. 예제 PHP 스크립트는 다음과 같습니다.
    query.php
    <?php
$query = $_GET['query'];

// These values may have been gotten from a database.
// We'll use a simple array just to show this example.
$values = ['Neo',
            'Ibiyemi',
            'Olayinka',
            'Jonathan',
            'Stephen', 
            'Fisayo', 
            'Gideon',
            'Mezie',
            'Oreoluwa', 
            'Jordan', 
            'Enkay', 
            'Michelle', 
            'Jessica'];

if ($query) {
    foreach ($values as $key => $value) {
        if (stripos($value, $query) === false) {
            unset($values[$key]);
        }
    }
}

echo json_encode(array_values($values));
?>


    확인



    이 방법의 문제점은 입력이 목록에서 온 것인지 확인하는 기본 방법이 없다는 것입니다. 이를 해결하기 위해 제출 작업에 대한 사용자 지정 함수를 설정하고 목록에서 입력 값을 찾을 수 없는 경우 제출을 방지합니다.

    에
    index.html
    변화

    <h2>The form</h2>
<form>
    <input type="text" name="name" id="name_input" list="huge_list">Name


    에게

    <h2>The form</h2>
<form onsubmit="return validateForm()">
    <input type="text" name="name" id="name_input" list="huge_list">Name


    에
    index.js
    추가하다

    function validateForm(){

    // Get the input element
    var input = document.getElementById('name_input');
    // Get the datalist
    var huge_list = document.getElementById('huge_list');


    // If we find the input inside our list, we submit the form
    for (var element of huge_list.children) {
        if(element.value == input.value) {
            return true;
        }
    }

    // we send an error message
    alert("name input is invalid")
    return false;
}


    그게 다야!!!

    이제 사용자가 잘못된 이름을 제출하려고 하면 오류 메시지가 표시됩니다.

    모든 샘플 코드는 this GitHub repository에서 찾을 수 있습니다.
    Websocket-stf
    포커스와 포지셔닝

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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