source

대규모 데이터베이스에서 typahead.js를 사용하는 방법

nicesource 2023. 8. 7. 22:37
반응형

대규모 데이터베이스에서 typahead.js를 사용하는 방법

저는 10,000개의 주소와 5,000명의 사람들로 구성된 대규모 데이터베이스를 가지고 있습니다.

사용자가 데이터베이스에서 주소 또는 사용자를 검색할 수 있도록 합니다.Twitter의 자동 검색 기능을 사용하여 텍스트를 입력할 때 결과를 제안하고 싶습니다.

여기에서 NBA의 예를 보십시오. http://twitter.github.io/typeahead.js/examples .

15,000개의 아이템을 프리페치하는 것은 속도와 부하 측면에서 최적이 아닌 것으로 알고 있습니다.이것을 달성하기 위해 노력하고 노력하는 더 나은 방법은 무엇일까요?

아무도 답변을 해주지 않았기 때문에, 저는 그때 제 제안을 진행하겠습니다.

빅데이터베이스에 가장 적합한 것은remote와 함께typeahead.js간단한 예:

$('#user-search').typeahead({
    name: 'user-search',
    remote: '/search.php?query=%QUERY' // you can change anything but %QUERY
});

이 기능은 다음에 문자를 입력할 때 수행됩니다.input#user-searchAJAX 요청을 페이지로 보냅니다.search.php쿼리를 입력 내용으로 사용합니다.

search.php다음 쿼리를 검색하여 DB에서 찾을 수 있습니다.

$query = $_GET['query'].'%'; // add % for LIKE query later

// do query
$stmt = $dbh->prepare('SELECT username FROM users WHERE username LIKE = :query');
$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();

// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
    $results[] = $row;
}

// and return to typeahead
return json_encode($results);

물론 DB가 크기 때문에 SQL 쿼리를 최적화하여 쿼리 속도를 높이고 결과를 캐시해야 합니다.

자동 검색 측에서 쿼리 DB에 대한 부하를 줄이기 위해 다음과 같이 지정할 수 있습니다.minLength또는limit:

$('#user-search').typeahead({
    name: 'user-search',
    remote: '/search.php?query=%QUERY',
    minLength: 3, // send AJAX request only after user type in at least 3 characters
    limit: 10 // limit to show only 10 results
});

따라서 DB의 크기는 중요하지 않습니다. 이 접근 방식은 잘 작동할 것입니다.

이것은 PHP의 예이지만 물론 당신이 가지고 있는 백엔드에 대해서도 동일해야 합니다.기본적인 아이디어를 얻으셨으면 좋겠습니다.

언급URL : https://stackoverflow.com/questions/18084408/how-to-use-typeahead-js-with-a-large-database

반응형