用PostgreSQL的PHP和AJAX创建jQuery UI自动完成功能的详细指南

DebugUsery
104 阅读2分钟

jQuery UI的自动完成功能允许用户根据输入的值从建议列表中选择一个项目。

你可以使用或不使用AJAX加载建议列表。

在本教程中，我展示了如何在你的页面上添加jQuery UI自动完成功能，并使用AJAX和PHP加载PostgreSQL数据库数据。

Create jQuery UI autocomplete with PostgreSQL PHP and AJAX

下载

内容

  1. 表格结构
  2. 配置
  3. 下载并包含
  4. HTML
  5. 脚本
  6. jQuery
  7. 输出
  8. 结论

1.表 的结构

我在这个例子中使用了users 表格：

CREATE TABLE users (
     id serial PRIMARY KEY,
     username varchar(80) NOT NULL,
     fullname varchar(80) NOT NULL,
     email varchar(80) NOT NULL
)

2.2 .配置

创建一个新的config.php 文件。

完成的代码

<?php

$host = "localhost";
$user = "postgres";
$password = "root";
$dbname = "tutorial";
$con = pg_connect("host=$host dbname=$dbname user=$user password=$password");

if (!$con) {
   die('Connection failed.');
}

3.下 载和包含

 <!-- CSS -->
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

 <!-- Script -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

4.4 .HTML

创建2个文本元素：

  • 第一个是用来初始化jQuery UI自动完成。
  • 第2个用于显示从建议列表中选择的项目值。

完成的代码

<!-- For defining autocomplete -->
Search User : <input type="text" id='autocomplete'> <br><br>

<!-- For displaying selected option value from autocomplete suggestion -->
Selected UserID : <input type="text" id='selectuser_id' readonly>

5.P HP

创建ajaxfile.php 文件来处理jQuery UI的AJAX请求。

检查search 是否是POST。

如果不是POST，则从users 表中获取所有记录并分配给$result ，否则，搜索fullname 字段并将获取的记录分配给$result 。

在$result 上循环，用value 和label 的键初始化$data 数组。

将$id 存储在value ，将$fullname 存储在label 。

以JSON格式返回$data 。

完成的代码

<?php
include 'config.php';

$result = array();
if(!isset($_POST['search'])){ 
      $sql = "select * from users order by fullname"; 
      $result = pg_query($con, $sql);
}else{ 
      $search = $_POST['search']; 

      $sql = "select * from users where fullname ilike $1";
      $result = pg_query_params($con, $sql, array('%'.$search.'%'));
}

$data = array();

while ($row = pg_fetch_assoc($result) ){

     $id = $row['id'];
     $fullname = $row['fullname'];

     $data[] = array(
         "value" => $id, 
         "label" => $fullname
     );

}

echo json_encode($data);
die;

6. jQuery

在#autocomplete 上初始化自动完成功能：

  • 使用source 选项，使用jQuery AJAX加载自动完成数据。
  • 发送AJAX POST请求到ajaxfile.php ，将dataType 设置为json ，并将输入的值作为data 。
  • 在成功的回调中，将数据传递给response() 。
  • #selectuser_id 使用select 事件，在#autocomplete 和value 的输入字段中显示所选的选项label 。

完成的代码

$(document).ready(function(){

   // Single Select
   $( "#autocomplete" ).autocomplete({
        source: function( request, response ) {

             // Fetch data
             $.ajax({
                  url: "ajaxfile.php",
                  type: 'post',
                  dataType: "json",
                  data: {
                       search: request.term
                  },
                  success: function( data ) {
                       response( data );
                  }
             });
        },
        select: function (event, ui) {
             // Set selection
             $('#autocomplete').val(ui.item.label); // display the selected text
             $('#selectuser_id').val(ui.item.value); // save selected id to input
             return false;
        }
    });

});

7.输 出

查看输出

8.总 结

如果建议列表没有显示，那么使用浏览器的网络标签来调试。

确保返回的响应是有效的格式，否则，数据不能正常加载。

你可以在这里查看本教程的MySQL版本。

avatar
文章
阅读
粉丝