javascript - template - typeahead states

Cómo usar typeahead.js con una gran base de datos

Question

Tengo una gran base de datos de 10,000 direcciones y 5,000 personas.

Quiero permitir que los usuarios busquen en la base de datos una dirección o un usuario. Me gustaría usar la tipografía de Twitter para sugerir resultados a medida que ingresan texto.

Vea el ejemplo de la NBA aquí: http://twitter.github.io/typeahead.js/examples .

Entiendo que la obtención previa de 15,000 elementos no sería óptima desde el punto de vista de la velocidad y la carga. ¿Cuál sería una mejor manera de tratar de lograr esto?

Answer 1

Como nadie respondió, seguiré adelante con mi sugerencia.

Creo que la mejor typeahead.js para su gran base de datos es usar el remote con typeahead.js . Ejemplo rápido:

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

Lo que hace es que cuando escribe caracteres en la input#user-search , enviará una solicitud AJAX a la página search.php con la consulta como el contenido de la entrada.

En search.php puede capturar esta consulta y buscarla en su base de datos:

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

Por supuesto, como su base de datos es bastante grande, debe optimizar su consulta SQL para realizar una consulta más rápida, tal vez almacenar el resultado, etc.

En el lado de typeahead, para reducir la carga a la base de datos de consulta, puede especificar minLength o 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
});

Entonces, realmente no importa cuán grande sea su base de datos, este enfoque debería funcionar bien.

Este es un ejemplo en PHP pero, por supuesto, debería ser el mismo para cualquier backend que tenga. Espero que tengas la idea básica.