jquery自动完成插件(autocomplete)应用之PHP版

下面我将为您讲解“jQuery自动完成插件(autocomplete)应用之PHP版”的完整攻略。

一、jQuery自动完成插件(autocomplete)简介

jQuery自动完成插件（autocomplete）能够自动完成文本框中输入的内容，同时提供下拉列表，并支持鼠标、键盘等多种交互方式。而我们使用它的PHP版本是jQuery UI的自带模块，因此我们使用前需要先下载jQuery UI，同时需要导入相关的样式和脚本。

二、如何使用jQuery自动完成插件(autocomplete)应用？

1. 导入相关的资源文件

在使用jQuery自动完成插件之前，我们需要先将其相关的样式表和脚本文件进行引用。在此，我们以CDN的方式引入jQuery和jQuery UI的资源文件。

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

2. 创建文本框

下一步，我们需要在页面中创建一个文本框，用户可以在该文本框中输入其需要搜索的信息。同时，我们需要使用jQuery UI中的autocomplete方法，并进行初始化设置。

<body>
  <input id="txtSearch" type="text" />
</body>

$(function(){
  // 使用jQuery UI autocomplete方法
  $('#txtSearch').autocomplete({
    // 提示列表的最大长度
    minLength: 1,
    // 从服务器中获取数据
    source: function(request, response){
      $.ajax({
        url: "search.php",  // 请求的地址
        dataType: "json",  // 返回的数据类型
        data: {  // 发送到服务器的数据
          search: request.term
        },
        success: function(data){  // 数据加载成功后的回调函数
          response(data);  // 将服务器返回的结果交给自动完成框进行显示
        }
      });
    }
  });
});

3. 处理搜索请求

接下来，在服务器端我们需要处理用户搜索请求，然后返回符合条件的结果。在此，我们假设我们的数据储存在MySQL数据库中，我们可以通过PHP代码读取数据库中的信息，并按照用户的搜索条件进行筛选，最终将筛选后的结果通过JSON格式返回给前端页面。

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "user", "password") or die(mysqli_error());

// 选择数据库
mysqli_select_db($conn, "database_name");

// 读取用户输入的搜索条件
$search = $_GET['search'];

// 执行查询
$query = "SELECT * FROM table_name WHERE column_name LIKE '%" . $search . "%'";
$result = mysqli_query($conn, $query) or die(mysqli_error());

// 将查询结果分装成JSON格式，并返回给前端页面
$return = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){

  $data = array('id' => $row['id'], 'value' => $row['value']);

  array_push($return, $data);
}

echo(json_encode($return));
?>

这样，我们就实现了一个简易的jQuery自动完成插件（autocomplete）应用的示例程序。

三、示例说明

示例1：基本实现

在本示例中，我们创建一个文本框作为搜索框，当用户输入其需要搜索的信息时，我们将借助jQuery自动完成插件，从服务器端动态加载已有数据，并将其以列表的形式展示给用户。

待搜索HTML代码：

<body>
  <input id="txtSearch" type="text" />
</body>

jQuery代码：

$(function(){
  // 使用jQuery UI autocomplete方法
  $('#txtSearch').autocomplete({
    // 提示列表的最大长度
    minLength: 1,
    // 从服务器中获取数据
    source: function(request, response){
      $.ajax({
        url: "search.php",  // 请求的地址
        dataType: "json",  // 返回的数据类型
        data: {  // 发送到服务器的数据
          search: request.term
        },
        success: function(data){  // 数据加载成功后的回调函数
          response(data);  // 将服务器返回的结果交给自动完成框进行显示
        }
      });
    }
  });
});

PHP代码：

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "user", "password") or die(mysqli_error());

// 选择数据库
mysqli_select_db($conn, "database_name");

// 读取用户输入的搜索条件
$search = $_GET['search'];

// 执行查询
$query = "SELECT * FROM table_name WHERE column_name LIKE '%" . $search . "%'";
$result = mysqli_query($conn, $query) or die(mysqli_error());

// 将查询结果分装成JSON格式，并返回给前端页面
$return = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){

  $data = array('id' => $row['id'], 'value' => $row['value']);

  array_push($return, $data);
}

echo(json_encode($return));
?>

在这个示例中，我们将用户输入的关键字以search的参数名发送给PHP后端程序，在PHP中，我们将用户输入的关键字作为查询条件，并将查询结果组装成JSON格式返回给前端页面，在前端页面中，通过调用jQuery UI中的autocomplete方法实现提示信息的展示。

示例2：未输入关键字时默认展示全部信息

在本示例中，我们在用户未输入关键字时，默认展示全部信息。