如何禁止jQuery UI autocomplete输入框手动输入，仅允许选择选项？

我在表单中使用jQuery UI autocomplete组件，但输入框仍允许手动输入内容，希望设置为仅能从搜索结果中选择值。以下是相关代码：

HTML表单代码 #

<form>
   <td><input type="text"  name="firstname" id = "aaa"></td>  (this is autocomplete field)  
   <td><input type="text"  name=""lastname" id = "bbb"></td>    
<input type = submit value = "submit">
</form>

引入的资源文件 #

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="frontend-script.js"></script>

frontend-script.js代码 #

$( function() {
  $( "#tutorial_name" ).autocomplete({
    source: 'backend-script.php'  
    });
});

后端PHP代码 #

<?php
include('database.php'); 

$searchTerm = $_GET['term'];
$sql = "SELECT * FROM vcent WHERE concent LIKE '%".$searchTerm."%'"; 
$result = $conn->query($sql); 
if ($result->num_rows > 0) {
  $tutorialData = array(); 
  while($row = $result->fetch_assoc()) {

   $data['id']    = $row['id']; 
   $data['value'] = $row['concent'];
   array_push($tutorialData, $data);
} 
}
 echo json_encode($tutorialData);
?>

解决方案 #

首先修正两处基础错误：

1. HTML中lastname输入框的name属性存在语法错误，应改为name="lastname"；
2. JS中的选择器#tutorial_name与目标输入框的id="aaa"不匹配，需将选择器改为$("#aaa")，否则autocomplete不会生效。

核心实现：强制仅选择搜索结果 #

通过autocomplete的事件监听和键盘输入限制，实现禁止手动输入的效果：

修改后的frontend-script.js代码：

$(function() {
  // 存储用户选中的合法值
  let selectedValidValue = null;

  $("#aaa").autocomplete({
    source: 'backend-script.php',
    // 选中选项时记录合法值
    select: function(event, ui) {
      selectedValidValue = ui.item.value;
    },
    // 输入框内容变化时校验
    change: function(event, ui) {
      // 若未选中选项，且当前输入值不是已记录的合法值，则清空输入
      if (!ui.item && $(this).val() !== selectedValidValue) {
        $(this).val('');
        selectedValidValue = null;
      }
    }
  });

  // 额外限制：仅允许导航、删除类按键，阻止手动输入字符
  $("#aaa").on('keydown', function(e) {
    // 允许的按键：上(38)、下(40)、退格(8)、删除(46)、Tab(9)、Enter(13)
    const allowedKeys = [38, 40, 8, 46, 9, 13];
    if (!allowedKeys.includes(e.keyCode)) {
      e.preventDefault();
    }
  });
});

补充：修复后端SQL注入风险 #

原后端代码直接拼接用户输入到SQL语句中，存在严重的SQL注入风险，建议改用预处理语句：

<?php
include('database.php'); 

$searchTerm = $_GET['term'] ?? '';
// 使用预处理语句构建查询
$sql = "SELECT * FROM vcent WHERE concent LIKE ?"; 
$stmt = $conn->prepare($sql);
// 绑定参数，通配符整合到参数中
$likeTerm = "%{$searchTerm}%";
$stmt->bind_param("s", $likeTerm);
$stmt->execute();
$result = $stmt->get_result();

$tutorialData = array(); 
if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    $data['id']    = $row['id']; 
    $data['value'] = $row['concent'];
    array_push($tutorialData, $data);
  } 
}

echo json_encode($tutorialData);
// 关闭语句和连接
$stmt->close();
$conn->close();
?>

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