NodeJS 및 React 🔍를 사용하여 웹 애플리케이션에 동적 검색 자동 완성 추가

소개

Google의 자동 완성 검색 표시줄이 입력할 때 다음 키 입력을 예측하는 것을 보셨을 것입니다.



그래서 저는 하나를 만들고 제가 발견한 것을 여러분 모두와 공유할 생각을 했습니다.
시작하자 🚀

Google의 검색 자동완성 API

나는 사용자가 타이핑을 시작하고 일부 검색 제안이 그의 얼굴(물론 div에서)에 날아오는 이런 종류의 것을 구현해야 하는 앱을 만들고 있었습니다. 그래서 몇 가지 무료 API를 찾기 위해 Google에서 방황하기 시작했습니다. 퀘스트에서 this 스택 오버플로 토론을 우연히 발견했습니다. 사용하도록 제안된 답변 중 하나는 다음과 같습니다.

https://www.google.com/complete/search?client=hp&hl=en&sugexp=msedr&gs_rn=62&gs_ri=hp&cp=1&gs_id=9c&q=a&xhr=t&callback=hello

이것은 기본적으로 google.com 자체가 검색 제안에 사용하는 URL입니다.

API 끝점

이제 테스트 브라우저 환경에서 Google의 API에 대한 일부 GET 요청을 작성해 보겠습니다. 저는 codesandbox.io가 이러한 작업을 위한 빠른 호스팅 웹 환경을 설정하는 가장 좋은 방법이라는 것을 알았습니다.



그리고.....새로고침!



흠, 이것은 CORS 오류입니다. NodeJS로 작업하는 방법을 알고 있는 경우에만 비교적 쉽게 고칠 수 있습니다. ;)

"방금 무슨 일이야?"

이러한 오류는 헤더Access-Control-Allow-Origin가 없을 때 발생합니다. 이 헤더가 없는 요청의 응답은 요청이 200 OK를 반환하더라도 브라우저에 의해 차단됩니다.

The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.

이 헤더here에서 자세한 내용을 찾으십시오. 이 오류는 브라우저 환경에서만 발생합니다. 따라서 이제 이 요청 작성 코드 블록을 노드 환경으로 전환한 다음 노드 API 끝점에 대한 요청 클라이언트에 대한 응답을 반환합니다.

또한 우체부 또는 불면증과 같이 로컬 시스템으로 GET 요청을 하는 경우에도 마찬가지입니다. 지정된 URL 인코딩 쿼리에 대해 정상적인 응답을 반환합니다q.



이제 검색 제안을 받고 이를 JSON 응답으로 반환하도록 노드 엔드포인트를 코딩해 보겠습니다.



호스팅 환경에 즉시 배포되는 빠른 코드 스니펫을 위해 저는 종종 replit.com을 사용하고 싶습니다.
이 코드에서는 express(웹 서버 가동용) 및 axios(인터넷을 통해 소스에 대한 GET/POST 요청 생성용)을 가져왔습니다.

그런 다음 익스프레스 서버/앱을 초기화하고 .get(url, (request, response) => {}) 메서드로 API GET ENDPOINT를 정의하고 axios로 Google의 API에 GET 요청을 만들고 반환된 제안 데이터를 요청 클라이언트로 보냈습니다.

새로 만든 끝점을 테스트하면 분명히 200 OK 응답이 반환되고 검색 결과가 제공됩니다.





하지만 끝점에 작업이 하나 더 남아 있으며 JSON 형식으로 멋지고 멋진 형식의 검색 제안을 반환합니다.



코드의 이 부분에서는 인덱싱을 사용하여 결과의 ​​주요 부분을 참조하고, 정규식을 사용하여 실제 완료 텍스트를 제공하는 부분만 가져오고, 정규식 일치에 대한 일부 null 검사를 추가했습니다. 이제 API 응답은 다음과 같습니다.

React 애플리케이션에서 API 구현

이제 실제로 API를 사용하여 사용자에게 검색 키 입력을 동적으로 제안하는 부분이 왔습니다. 코드 샌드박스에서 입력을 받아 상태에 저장하는 기본 반응 앱을 실행해 보겠습니다.



이제 입력 값이 변경될 때마다 키를 누를 때마다 수십 개의 요청으로 엔드포인트에 스팸을 보내는 것을 원하지 않습니다. 따라서 우리는 다음과 같이 시간 초과 기반 요청 가져오기를 구현할 것입니다.

import axios from "axios";
import { useState } from "react";

export default function App() {
  const [searchResults, setSearchResults] = useState([]);
  const [inputText, setInputText] = useState("");
  const [inputTimer, setInputTimer] = useState(null);

  const handleInputChange = async (e) => {
    setInputText(e.target.value);

    clearTimeout(inputTimer);
    let timeout = setTimeout(() => {
      console.log("FETCHING RESULTS");
      axios
        .get(
          `https://autocomplete-google-search.kuvambhardwaj.repl.co/autocomplete?q=${e.target.value}`
        )
        .then((res) => {
          setSearchResults(res.data);
        });
    }, 300);
    setInputTimer(timeout);
  };

  return (
    <div className="App">
      <center>
        <input
          value={inputText}
          onChange={handleInputChange}
          placeholder="Type something"
          style={{ fontSize: "24px" }}
        />

        <div style={{ marginTop: "30px" }}>
          <ul>
            {searchResults.map((searchResult) => (
              <li>{searchResult}</li>
            ))}
          </ul>
        </div>
      </center>
    </div>
  )
}

이제 우리가 하는 일은 입력 값이 변경될 때마다 300ms와 같은 시간 초과를 설정하고 상태에 시간 초과 참조를 저장하는 것입니다. 사용자가 문자를 입력하고 입력 값이 300ms 이내에 변경되면 이전 설정이 지워집니다. 시간 초과하고 새 것을 초기화하십시오. 300ms의 입력 비활성화 후 마지막으로 가장 최근의 입력 값으로 자동 완성 요청을 할 것입니다.
응용 프로그램은 다음과 같이 작동해야 합니다.






내 게시물이 마음에 들면 다음을 고려하십시오 :)

트위터 ->
Github -> @kuvamdazeus
링크드인 ->
포트폴리오 -> kuvambhardwaj.vercel.app