尝试使用typeahead.js、php和Ajax获取id和值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<input type="text" id="search-input" autocomplete="off">
<div id="search-results"></div>

$(document).ready(function() {
  $('#search-input').typeahead({
    minLength: 2, // 最小输入字符数
    highlight: true, // 是否高亮匹配的结果
    hint: true, // 是否显示自动完成提示
  }, {
    source: function(query, process) {
      // 发送Ajax请求获取数据
      $.ajax({
        url: 'search.php', // 服务器端处理脚本的URL
        type: 'POST',
        dataType: 'json',
        data: { query: query }, // 发送的数据，可以包含用户输入的查询词
        success: function(data) {
          // 处理服务器返回的数据
          process(data);
        }
      });
    }
  });
});

<?php
// 连接数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取查询词
$query = $_POST['query'];

// 执行查询
$sql = "SELECT id, value FROM your_table WHERE value LIKE '%$query%'";
$result = $conn->query($sql);

// 构建结果数组
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array('id' => $row['id'], 'value' => $row['value']);
    }
}

// 返回JSON格式的结果
header('Content-Type: application/json');
echo json_encode($data);

// 关闭数据库连接
$conn->close();
?>