web-dev-qa-db-fra.com

Comment utiliser typeahead.js avec une grande base de données

J'ai une grande base de données de 10 000 adresses et 5 000 personnes.

Je souhaite permettre aux utilisateurs de rechercher dans la base de données une adresse ou un utilisateur. J'aimerais utiliser la frappe de Twitter pour suggérer des résultats lorsqu'ils entrent du texte.

Voir l'exemple NBA ici: http://Twitter.github.io/typeahead.js/examples .

Je comprends que la prélecture de 15 000 articles ne serait pas optimale du point de vue de la vitesse et de la charge. Quelle serait une meilleure façon d'essayer d'y parvenir?

javascriptajaxdatabasetypeahead.js
24
alias51

Étant donné que personne n'a répondu, je vais donc poursuivre ma suggestion.

Je pense que la meilleure solution pour votre grande base de données est d'utiliser remote avec typeahead.js. Exemple rapide:

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

Ce qu'il fait, c'est lorsque vous tapez des caractères dans le input#user-search il enverra AJAX à la page search.php avec requête comme contenu de l'entrée.

Sur search.php vous pouvez intercepter cette requête et la rechercher dans votre base de données:

$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);

Bien sûr, puisque votre base de données est assez grande, vous devez optimiser votre requête SQL pour interroger plus rapidement, peut-être mettre en cache le résultat, etc.

Côté frappe, pour réduire la charge de la base de données de requête, vous pouvez spécifier minLength ou 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
});

Donc, peu importe la taille de votre base de données, cette approche devrait bien fonctionner.

Ceci est un exemple en PHP mais bien sûr, il devrait être le même pour tout backend que vous avez. J'espère que vous aurez l'idée de base.

46
Hieu Nguyen