我有一个半正常运行的站点。我有一个非功能性搜索栏。我希望用户能够输入一个人的名字。然后我希望搜索栏在onkeydown()上返回该人的姓名和照片。就像Facebook。
这将需要类似于下拉菜单的XHTML/CSS,但是要对mysql表进行查询。Facebook同时查询名字和姓氏字段,这解释了为什么他们不像twitter那样将两者结合起来。我只插入了全名,这样更方便。我将发送每个字母并匹配full_name mysql列。你怎么写正则表达式来做这个或者更高级的-你怎么写函数来做这个?
PHP -伪代码
function match()
{
// Run Query
// Return list(full_name,picture)
// If less then 5
Modify up query to obtain 5
Embedded if (special case less then 5 available - new site)
Send
If more then 5
Modify down query to obtain 5
Elseif ==5
Send
}
XHTML/CSS/Javascriptfunction display()
{
// Display list - set max returns (5)
}
查看jQueryUI自动完成功能,特别是远程数据源和自定义数据和显示示例。
在PHP端你需要的是
- 根据提供的搜索数据查询数据库
- 构建匹配条目的数组
- 使用
json_encode()
将数组显示为JSON数据
这是修改自我的Facebook好友自动完成选择器。
这是JavaScript的核心
jQuery(function($) {
var field = $('#friend-name'); // text field for name
var idField = $('#friend-id'); // hidden field for ID
field.autocomplete({
minLength: 3,
width: 240,
source: 'search.php',
change: function(event, ui) {
idField.val(ui.item != null ? ui.item.id : '');
return true;
}
}).data('autocomplete')._renderItem = function(ul, item) {
var img = '<img src="' + item.picture + '">';
return $('<li>')
.data('item.autocomplete', item)
.append('<a>' + item.label + img + '</a>')
.appendTo(ul);
};
});
根据参数进行搜索的PHP部分如下所示
// search.php
// assuming PDO connection already made in $db
$stmt = $db->prepare('SELECT `id`, `name`, `picture` FROM `Person` WHERE LOWER(`name`) LIKE ?');
$stmt->execute(array(
strtolower($_GET['term'] . '%')
));
$people = array();
while($person = $stmt->fetch(PDO::FETCH_ASSOC)) {
$people[] = array(
'label' => $person['name'],
'value' => $person['name'],
'picture' => $person['picture'],
'id' => $person['id']
);
}
echo json_encode($people);