如何在使用大型数据库时使用typeahead.js

24

我有一个包含10,000个地址和5,000个人的大型数据库。

我想让用户搜索数据库,可以搜索地址或用户。我想使用Twitter的typeahead在用户输入文本时建议结果。

在这里查看NBA示例:http://twitter.github.io/typeahead.js/examples

我理解预取15,000个项在速度和负载方面都不是最优的。有什么更好的方法来尝试实现这一点呢?


1
“remote”是你需要的。请查看最后两个示例。 - Hieu Nguyen
1
只是一个想法,选择最少的字符,然后仅使用与研究领域匹配的数据启动typeahead功能。这样你就不会有15000个项目了。但是如果用户是某种类型的研究狂人,我不确定它是否会更重。 - nubinub
1个回答

48

既然没有人回答,那我就直接执行我的建议。

我认为适合你的大型数据库的最佳选择是使用typeahead.js中的remote。快速示例:

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

它的作用是,当你在 input#user-search 中输入字符时,它会发送 AJAX 请求到页面 search.php,查询内容为输入框中的内容。

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查询以获得更快的查询速度,可能需要缓存结果等。
在typeahead方面,为减少对数据库的查询负载,您可以指定minLengthlimit
$('#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的一个示例,但当然对于您拥有的任何后端都应该是相同的。希望您能理解基本的想法。


你研究过Bloodhound吗? 我正在试图将typeahead、knockout和bloodhound融合到我的头脑中。 尽管从我所看到的Bloodhound来看,它可以轻松地与typeahead集成。 - zeristor
你会如何使用 Ruby 实现这个? - zero_cool
@Jackson_Sandland 这取决于你使用的框架,我想你应该打开一个带有 Ruby 标签的新问题。 - Hieu Nguyen
1
注意,现在你必须使用BloodHound进行远程操作。 - Phil Hudson
这个搜索是“实时”的吗?还是数据库结果只在页面加载时加载?例如,如果向数据库添加了条目,用户是否立即可以使用它? - user1063287
这个“远程”的整个意义在于每次用户搜索时都会向后端发出AJAX请求,因此结果始终是来自您的数据库的最新结果。 - Hieu Nguyen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接