我有一个包含 10,000 个地址和 5,000 人的大型数据库。
我想让用户在数据库中搜索地址或用户。我想使用 Twitter 的 typeahead 在他们输入文本时建议结果。
在此处查看 NBA 示例:http://twitter.github.io/typeahead.js/examples .
我知道从速度和负载的 Angular 来看,预取 15,000 个项目并不是最佳选择。尝试实现这一目标的更好方法是什么?
最佳答案
既然没人回答,那我就继续我的建议吧。
我认为最适合您的大型数据库的是使用 remote
和 typeahead.js
。快速示例:
$('#user-search').typeahead({
name: 'user-search',
remote: '/search.php?query=%QUERY' // you can change anything but %QUERY
});
它的作用是当您在 input#user-search
中键入字符时,它会向页面 search.php
发送 AJAX 请求,并将查询作为内容输入。
在 search.php
上,您可以捕获此查询并在您的数据库中查找它:
$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);
当然,因为你的数据库很大,你应该优化你的 SQL 查询以更快地查询,也许缓存结果等。
在提前输入方面,为了减少查询数据库的负载,您可以指定 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
});
因此,您的数据库有多大并不重要,这种方法应该能很好地工作。
这是 PHP 中的一个示例,但对于您拥有的任何后端,它当然应该是相同的。希望您了解基本概念。
关于javascript - 如何在大型数据库中使用 typeahead.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18084408/