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

Posted

技术标签:

【中文标题】如何在大型数据库中使用 typeahead.js【英文标题】:How to use typeahead.js with a large database 【发布时间】:2013-08-07 17:01:29 【问题描述】:

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

我想让用户在数据库中搜索地址或用户。我想在他们输入文本时使用 Twitter 的预输入来建议结果。

在此处查看 NBA 示例:http://twitter.github.io/typeahead.js/examples。

我知道从速度和负载的角度来看,预取 15,000 个项目并不是最佳选择。尝试实现这一目标的更好方法是什么?

【问题讨论】:

remote 是您所需要的。检查最后 2 个示例 只是一个想法,只需选择最少数量的字符,然后仅使用与研究字段匹配的数据启动预输入功能。这样你就不会有 15000 个项目。但不确定如果用户是某种研究狂人会不会更重。 【参考方案1】:

既然没人回答,那我就继续我的建议吧。

我认为最适合您的大型数据库的是使用remotetypeahead.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 查询以更快地查询,也许缓存结果等。

在预先输入方面,为了减少查询数据库的负载,您可以指定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 中的一个示例,但是对于您拥有的任何后端,它当然应该是相同的。希望您了解基本概念。

【讨论】:

你调查过寻血猎犬吗?我正试图将 typeahed、knout 和 Bloodhound 塞进我的脑海。虽然从我对 Bloodhound 的了解来看,它可以直接与 typeahead 挂钩。 你会怎么做这个 Ruby? @Jackson_Sandland 这取决于您使用的框架,我想您应该为此打开一个带有 Ruby 标签的新问题 注意,远程你现在必须使用 BloodHound。 此搜索是否“实时”?还是仅在页面加载时才加载数据库结果?那么,例如,如果一个条目被添加到数据库中,它会立即可供用户使用吗?

以上是关于如何在大型数据库中使用 typeahead.js的主要内容,如果未能解决你的问题,请参考以下文章

我们如何在 Typeahead.js 中设置遥控器?

在 Django 项目中使用 typeahead.js

如何使用 Typeahead.js 隐藏 div

Typeahead.js - 在多个属性值中搜索

在 Laravel 5.5 中使用 Typeahead.js 使用两个表格列进行自动完成搜索

Twitter Typeahead.js - 选择时删除数据