화려한 서론 없이 바로 본론으로 들어가자

How to implement google-like search query to your existing website or database

모방하고 싶은 기능

데이터베이스에서 키워드 검색

철자가 틀린 단어 지원

키워드 자동 제안(이것을 찾으셨나요?)

여기서 생성할 코드는 백엔드에 구애받지 않습니다.

즉, 모든 서버 측 프로그래밍 언어를 사용할 수 있습니다. 하지만 이 자습서에서는 PHP와 MySQL을 사용하여 모방하려는 기능을 시뮬레이션합니다.

할 일

[x] 검색 표시줄 및 목록 만들기

[x] 자동으로 키워드 제안

[x] 데이터베이스에 연결

[x] 데이터 가져오기

[x] 결과 표시

검색 표시줄 및 결과 목록

복잡하고 멋진 CSS 디자인이 필요하지 않으므로 일반 HTML을 사용합니다.

<!-- index.html -->
<input  id="search"  type="text"  placeholder="Search">
<button  id="btnSearch">Search</button>
<br/>
<span  id="didyoumean"></span>
<ul  id="result">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

자동 제안 키워드

NPM 또는 CDN을 통해 puzzy-search 이라는 라이브러리를 설치해야 합니다.

npm install puzzy-search

또는 이것을 <head> 태그 안에 포함시키십시오.

<script  src="https://unpkg.com/puzzy-search/dist/index.js"></script>

If you chose CDN, a global variable named puzzySearch will be available. In my case, I used NPM

스크립트 내에서 제어하려는 요소를 준비합니다.

// javascript

const { search, suggest, regex } = require('puzzy-search')

let  str = document.querySelector('#search')
let  btnSearch = document.querySelector('#btnSearch')
let  suggestion = document.querySelector('#didyoumean')
let  resultList = document.querySelector('#result')

str.addEventListener('input', () => {
    if (str.value)
        suggestion.innerHTML = `Did you mean: ${suggest(str.value)}`
    else
        suggestion.innerHTML = ''
})

위의 코드는 검색 입력에서 입력 이벤트를 수신하고 #didyoumean 함수에서 반환된 제안 요소( suggest(str.value) )의 콘텐츠를 변경합니다.

기능
매개변수
반환 유형
정의

검색
(키워드, 문장)Boolean문장이 항목 중에 키워드를 포함하는지 여부를 결정하고 형태소 분석 알고리즘을 사용하여 맞춤법이 틀린 단어를 적절하게 지원하는 true 또는 false를 반환합니다.

제안하다
(키워드)String철자가 틀린 단어에 대해 제안된 수정 사항을 반환합니다.

정규식
(키워드)RegEx모든 문자열로 테스트할 수 있는 RegEx 문자열을 반환합니다.

데이터베이스에 연결

자격 증명( hostname , username , password , dbname )과 함께 아래 코드를 사용하여 데이터베이스용 웹 API를 만듭니다.

// api.php

header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
// echo json_encode($_GET['regex']);
$hostname='localhost';
$username='root';
$password='';

try {
    $dbh = new  PDO("mysql:host=$hostname;dbname=ulimslab",$username,$password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line
    $sql = "SELECT  *  FROM `sample` WHERE  CONCAT(`sampleName`, ' ', `description`, ' ', `remarks`) REGEXP ? LIMIT  10";

    $stmt = $dbh->prepare($sql);
    $stmt->execute([str_replace('/' , '', $_GET["regex"])]);
    $result = $stmt->fetchAll();

    echo  json_encode($result);

    $dbh = null;

} catch(PDOException  $e) {
    echo  json_encode($e->getMessage());
}

이 코드는 클라이언트로부터 정규식을 수신하고 데이터베이스를 쿼리하고 결과를 반환합니다.

데이터 가져오기 및 결과 표시

우리 고객에게 돌아가겠습니다. btnSearch를 클릭했을 때 서버에서 데이터를 가져오려면 HTTP 요청을 트리거해야 합니다.

// javascript

btnSearch.addEventListener('click', () => {
    let  regex = regex(str.value)
    fetch('api.php?regex=' + regex)
        .then(res  =>  res.json()).then(data  => {
            result.innerHTML = data.map(r  =>  `<li>${r.sampleName}</li>`).join('')
        })
        .catch(e  =>  console.log(e))
})

위의 코드는 btnSearch click event를 수신하고 사용자 입력으로 Regular Expression를 기반으로 regex(str.value)를 생성한 다음 regex를 쿼리 매개변수로 사용하여 HTTP Get Method 요청을 트리거하고 resultList.innerHtml의 내용을 변경합니다.

태다!!! 짜잔! 거기는; 🇵🇭에서 만든

요약

한 기사에서 꽤 많은 양이었습니다. 그래도 배울 것이 더 많이 있습니다.

학습 내용을 요약해 보겠습니다.

[x] 간단한 html을 사용하여 검색 표시줄 및 목록을 만드는 방법

[x] puzzy-search, 제안 및 생성search에 대한 regex 라이브러리 기능 탐색

[x] 데이터베이스에 연결된 JSON 형식의 RESTful 웹 API 생성

[x] HTTP Get 메서드 요청을 통해 백엔드에서 데이터 소비

[x] API의 결과 표시

그것은 많았지만 이제 puzzy-search 에 익숙해져서 그 가치를 확인하고 문서에서 필요한 나머지를 찾을 수 있기를 바랍니다.

Reference

이 문제에 관하여(웹사이트 또는 데이터베이스에 Google과 유사한 검색어 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/trinly01/add-google-like-search-query-to-your-website-or-database-2l2j

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

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

웹사이트 또는 데이터베이스에 Google과 유사한 검색어 추가