使用jQuery自动完成功能填充表单值可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<input type="text" id="inputField">
<ul id="autocompleteList"></ul>
$(document).ready(function() {
// 监听输入框的键盘输入事件
$('#inputField').keyup(function() {
var query = $(this).val(); // 获取输入框的值
if (query !== '') {
// 发送AJAX请求,获取自动完成的数据
$.ajax({
url: 'autocomplete.php', // 替换为实际的后端接口地址
method: 'GET',
data: { query: query },
success: function(response) {
// 清空自动完成列表
$('#autocompleteList').empty();
// 遍历返回的数据,添加到自动完成列表中
$.each(response, function(index, item) {
$('#autocompleteList').append('<li>' + item + '</li>');
});
}
});
} else {
// 清空自动完成列表
$('#autocompleteList').empty();
}
});
// 监听自动完成列表项的点击事件
$('#autocompleteList').on('click', 'li', function() {
var value = $(this).text(); // 获取点击的列表项的值
$('#inputField').val(value); // 将值填充到输入框中
$('#autocompleteList').empty(); // 清空自动完成列表
});
});
<?php
$query = $_GET['query']; // 获取前端传递的查询参数
// 根据查询参数进行数据查询,返回匹配的结果
$data = array('Apple', 'Banana', 'Orange', 'Pineapple');
$results = array();
foreach ($data as $item) {
if (strpos($item, $query) !== false) {
$results[] = $item;
}
}
// 返回JSON格式的结果
header('Content-Type: application/json');
echo json_encode($results);
?>
以上代码实现了一个简单的jQuery自动完成功能,当用户在输入框中输入内容时,会发送AJAX请求到后端接口进行数据查询,并将查询结果显示在自动完成列表中。用户可以通过点击列表项来选择填充到输入框中的值。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云