Question

我有一个半功能的网站。我有一个非功能搜索栏。我希望用户能够输入一个人的姓名。然后我希望搜索栏在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

  }

CSS / XHTML /使用Javascript

function display()
  {
  // Display list - set max returns (5)
  }

Answer 1

查看jQueryUI自动填充功能，尤其是Remote Datasource和Custom Data and Display示例。

你在PHP方面需要的是

根据提供的搜索数据查询数据库
构建匹配条目数组
使用json_encode()

更新

这是从我的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);

我如何实现搜索？

1 个答案:

更新