Textarea自动完成phpmyadmin样式 - PHP

在开发Web应用程序时，textarea是常用的表单元素之一，用于用户输入大段文本。如果您正在创建一个需要用户手动输入SQL查询的应用程序，那么可以使用textarea组件并为其添加自动完成功能，以使它更易于使用和更具交互性。本文将介绍如何为textarea添加自动完成功能，并模拟phpMyAdmin的样式。

技术栈

• PHP
• jQuery
• AJAX
• MySQL

实现步骤

1. 创建textarea表单元素

<label for="query">SQL查询：</label>
<textarea name="query" id="query"></textarea>

2. 引入jQuery库和自动完成插件

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

3. 使用jQueryUI的autocomplete插件为textarea添加自动完成功能

$(function() {
    $("#query").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "autocomplete.php",
                dataType: "json",
                data: {
                    query: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    });
});

其中，autocomplete()函数用于初始化自动完成插件，source选项用于指定自动完成数据的来源。此处通过AJAX请求后端的autocomplete.php脚本来获取数据，并填充自动完成列表。

4. 在后端编写autocomplete.php脚本

<?php

// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

// 查询匹配的SQL语句
if (isset($_GET['query'])) {
    $query = $_GET['query'];
    $sql = "SELECT DISTINCT name FROM queries WHERE name LIKE '$query%'";
    $result = $conn->query($sql);

    // 将结果格式化为JSON
    $data = array();
    while ($row = $result->fetch_assoc()) {
        $data[] = $row['name'];
    }
    echo json_encode($data);
}

$conn->close();

?>

此处，我们从GET请求参数中获取用户输入的查询字符串$query，并在数据库中查询匹配的SQL语句，并将查询结果格式化为JSON，以便前端自动完成插件使用。

5. 样式设计

为了能够模拟phpMyAdmin的样式，可以在#query的.ui-autocomplete类上添加相关样式，例如：

.ui-autocomplete {
    position: absolute;
    cursor: default;
    height: 150px;
    overflow-y: scroll;
}

.ui-autocomplete li {
    font-size: 12px;
    padding: 2px 5px;
    cursor: pointer;
}

.ui-autocomplete li.ui-state-focus {
    background-color: #0078D7;
    color: #fff;
}

6. 完整代码片段

<label for="query">SQL查询：</label>
<textarea name="query" id="query"></textarea>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<script>
$(function() {
    $("#query").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "autocomplete.php",
                dataType: "json",
                data: {
                    query: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 2, // 最少输入2个字符才触发自动完成
        delay: 100 // 等待100ms后触发自动完成
    });
});
</script>

<style>
.ui-autocomplete {
    position: absolute;
    cursor: default;
    height: 150px;
    overflow-y: scroll;
}

.ui-autocomplete li {
    font-size: 12px;
    padding: 2px 5px;
    cursor: pointer;
}

.ui-autocomplete li.ui-state-focus {
    background-color: #0078D7;
    color: #fff;
}
</style>

总结

通过使用jQueryUI的自动完成插件和AJAX技术，我们可以为textarea表单元素添加自动完成功能，并为其设计样式，以实现更好的用户体验和交互性。本文介绍了如何在PHP中编写后端脚本来获取自动完成数据，并返回JSON格式的数据，以便前端能够正常加载。使用这种方式可以轻松实现自动完成功能，并使用样式，使之更接近像phpMyAdmin的样式。