如何实现搜索？

发布于 2024-11-28 08:00:12 字数 751 浏览 0 评论 0原文

我有一个半功能的网站。我有一个不起作用的搜索栏。我希望用户能够输入一个人的名字。然后我希望搜索栏在 onkeydown() 上返回该人的姓名和图片。基本上就像脸书一样。

这将需要类似于下拉菜单的 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)
  }

原文

I have a semi-functioning site. I have a non functional search bar. I want the user to be able to type in a person's name. Then I want the search bar to return the person's name and picture on onkeydown(). Basically like Facebook.

This will need the XHTML/CSS similar to a drop down menu, but with a query to the mysql table. Facebook queries both the first name and last name field which explains why they don't combine the two like twitter does. I only have a full name inserted so that makes that easier. I'll send each letter and match against the full_name mysql column. How do you write the regular expressions to do this or more high level - how do you write the function to do this?

PHP - Pseudo code

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)
  }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅语花开 2024-12-05 08:00:12

查看 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);

Check out the jQueryUI Autocomplete feature, particularly the Remote Datasource and Custom Data and Display examples.

What you'll want on the PHP side is to

Query the database based on supplied search data
Build an array of matching entries
Display that array as JSON data using json_encode()

Update

This is modified from my Facebook friend autocomplete selector.

Here's the core of the 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);
    };
});

The PHP part to search based on parameters would look something like this

// 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);

回复收藏 0 原文

~没有更多了~