一键get！jQuery下拉框打造搜索分页新体验

2023-09-16 01:10:30

利用 jQuery 增强下拉框：打造无缝搜索和分页体验

前言

下拉框是一种在网页开发中广泛使用的控件，允许用户从预定义列表中选择一个或多个选项。为了提升用户体验，可以在下拉框中集成搜索和分页功能，从而简化查找所需选项的过程。本文将循序渐进地指导您使用 jQuery 实现这一强大功能。

步骤 1：准备 HTML 代码

首先，构建下拉框的 HTML 结构：

<select id="mySelect">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
  <option value="4">选项 4</option>
  <option value="5">选项 5</option>
</select>

步骤 2：准备 CSS 代码

接下来，为下拉框定义样式：

#mySelect {
  width: 200px;
  height: 30px;
}

步骤 3：准备 jQuery 代码

利用 jQuery 引入搜索和分页功能：

$(document).ready(function() {
  $("#mySelect").select2({
    placeholder: "搜索选项",
    allowClear: true,
    minimumResultsForSearch: Infinity,
    ajax: {
      url: "search.php",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term // 搜索词
        };
      },
      processResults: function(data, params) {
        return {
          results: data.items // 搜索结果
        };
      },
      cache: true
    },
    pagination: true
  });
});

步骤 4：准备 PHP 代码

处理搜索请求的 PHP 代码：

<?php
// 数据库连接
$conn = new mysqli("localhost", "root", "", "my_database");

// 获取搜索词
$q = $_GET['q'];

// SQL 查询
$sql = "SELECT * FROM items WHERE name LIKE '%$q%'";

// 查询执行
$result = $conn->query($sql);

// JSON 编码结果
$data = array();
while ($row = $result->fetch_assoc()) {
  $data[] = array(
    'id' => $row['id'],
    'text' => $row['name']
  );
}

// JSON 响应
echo json_encode($data);