SQL查询后修改输入框值异常：城市选择功能求助

核心问题分析 #

动态生成的<p>元素无法触发enterCity函数，因为页面初始化时这些元素还未存在，直接给$('p')绑定事件只会作用于当时已加载的元素，后续动态添加的元素不会继承该事件绑定。

具体修复步骤 #

1. 改用事件委托绑定点击事件

将原事件绑定代码：

$('p').on(click, enterCity);

修改为事件委托方式，绑定到页面初始化时已存在的父容器#dropdown-content上：

$('#dropdown-content').on('click', 'p', enterCity);

此方式会监听父容器内所有<p>元素的点击事件，包括后续动态生成的，同时注意click需要加引号。

2. 修复enterCity函数语法错误

原函数缺少闭合的}，导致脚本执行异常，修正后：

function enterCity(){
    var city = $(this).text();
    $("#Stadt_suche").val(city);
}

3. 优化PHP查询的通配符处理（更安全）

当前JS中拼接str + "%"传递给后端，建议将通配符移到PHP端处理，避免前端拼接风险，同时保持参数绑定的安全性：

<?php
$mysqli = new mysqli("host", "user", "password", "database");
if($mysqli->connect_error) {
  exit('Could not connect');
}

$search = $_GET['q'] . '%'; // 在PHP端添加通配符
$sql = "SELECT DISTINCT `Ort` FROM `HaendlernetzGesamt` WHERE `Ort` Like ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $search); // 绑定处理后的变量
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($ort);

if($stmt->num_rows > 0){
    while ($stmt->fetch()){
        echo "<p id='" . htmlspecialchars($ort) . "'>". htmlspecialchars($ort) ."</p>";
    }
}
?>

同时JS中请求URL改为：

xmlhttp.open("GET", "getcity.php?q=" + str, true);

添加htmlspecialchars()转义输出，可避免XSS攻击。

4. 可选优化：添加防抖减少重复请求

频繁触发keyup会导致多次无效查询，添加防抖函数可限制请求频率：

let debounceTimer;
function showCity() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        var str = SSI_GetValue('Stadt_suche');
        if (str.length <= 2) {
            document.getElementById("dropdown-content").innerHTML = "";
            return;
        } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("dropdown-content").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "getcity.php?q=" + str, true);
            xmlhttp.send();
        }
    }, 300); // 300ms延迟，可根据需求调整
}

最终修正后的完整JS代码 #

$('#Stadt_suche').keyup(showCity);
$('#dropdown-content').on('click', 'p', enterCity);

let debounceTimer;
function showCity() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        var str = SSI_GetValue('Stadt_suche');
        if (str.length <= 2) {
            document.getElementById("dropdown-content").innerHTML = "";
            return;
        } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("dropdown-content").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "getcity.php?q=" + str, true);
            xmlhttp.send();
        }
    }, 300);
}

function enterCity(){
    var city = $(this).text();
    $("#Stadt_suche").val(city);
}

内容的提问来源于stack exchange，提问作者sarah