在jQuery UI自动完成结果单击时通过POST传递值
jQuery UI自动完成结果单击时通过POST传递值
基础概念
jQuery UI的自动完成(Autocomplete)功能是一个强大的UI组件，它可以根据用户输入提供建议列表。当用户从建议列表中选择一个项目时，通常需要将该选择的值发送到服务器进行处理。
实现方法
要实现单击自动完成结果时通过POST传递值，可以使用以下方法：
1. 基本实现
$(function() {
$("#autocomplete-input").autocomplete({
source: function(request, response) {
// 这里可以是从服务器获取数据或本地数据
$.get("/search", { term: request.term }, function(data) {
response(data);
});
},
select: function(event, ui) {
// 当用户选择一个项目时触发
$.post("/process-selection", { selectedValue: ui.item.value }, function(data) {
// 处理服务器响应
console.log("Server response:", data);
});
return false; // 阻止默认行为
}
});
});2. 完整示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Autocomplete with POST</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Search: </label>
<input id="tags">
</div>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
select: function(event, ui) {
// 使用POST发送选中的值
$.ajax({
url: "/api/process-selection",
type: "POST",
data: {
selected_item: ui.item.value,
timestamp: new Date().getTime()
},
success: function(response) {
console.log("Selection processed:", response);
alert("You selected: " + ui.item.value + "\nServer response: " + response.message);
},
error: function(xhr, status, error) {
console.error("Error:", error);
alert("Error processing selection");
}
});
return false; // 阻止默认行为
}
});
});
</script>
</body>
</html>关键点说明
- select事件：这是当用户从自动完成列表中选择一个项目时触发的事件。
- ui.item：包含所选项目的详细信息，如value、label等。
- $.post()：jQuery的AJAX方法，用于发送POST请求。
- return false：阻止默认行为（通常是填充输入框），如果你想保留默认行为，可以移除这一行。
服务器端处理
服务器端需要有一个端点来处理POST请求。例如，在Node.js中：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/api/process-selection', (req, res) => {
const selectedItem = req.body.selected_item;
console.log('Received selection:', selectedItem);
// 处理逻辑...
res.json({
status: 'success',
message: `Processed: ${selectedItem}`
});
});
app.listen(3000, () => console.log('Server running on port 3000'));优势
- 用户体验：无缝的搜索和选择体验
- 灵活性：可以自定义发送的数据和服务器处理逻辑
- 安全性：POST请求比GET更适合发送敏感数据
常见问题及解决方案
问题1：POST请求没有发送
- 原因：可能没有阻止默认行为，或者事件没有正确绑定
- 解决：确保在select事件处理程序中返回false
问题2：服务器没有收到数据
- 原因：可能数据格式不正确或端点错误
- 解决：检查浏览器开发者工具中的网络请求，确保数据格式正确
问题3：跨域问题
- 原因：前端和后端不在同一域名下
- 解决：配置CORS或使用JSONP（如果是GET请求）
应用场景
- 电子商务网站的产品搜索
- 内容管理系统的标签选择
- 地理位置搜索
- 用户名称自动完成
- 表单中的动态数据选择
通过这种方式，你可以创建响应迅速、用户友好的自动完成功能，同时确保数据通过安全的方式传输到服务器。
相关·内容
我尝试使用POST将所选项目的id值传递给search.php文件。如果我使用GET，它工作得很好，但如果我使用POST，它就不能工作。} }, select: function( event, ui) { var id
浏览 3提问于2016-07-20得票数 0
回答已采纳
我有一个当前功能良好的输入，它可以在JSON数组中正确搜索，并根据所选内容显示内容。不过，我正在尝试向搜索工具添加功能，使其能够接受URL中的查询字符串。我还会注意到，我可以将搜索词粘贴到输入中，然后它就会进行搜索，但是如果它从URL中获取值，它似乎忽略了搜索函数。jfyi -问题标记始终默认为jquery
浏览 1提问于2017-05-25得票数 1
回答已采纳
我使用的是jQuery UI自动完成小部件。我需要使用选定的文本进行进一步处理，更改或选择后直接。source: function( req, resp ) {
$.post( "/echo/json/", {delay:
浏览 2提问于2011-06-10得票数 3
回答已采纳
我在谷歌上搜索过，但还没有找到答案。也许这是因为我对jQuery / javascript拥有中等的专业知识。jQuery - 1.6.3Firefox 7.0.1中的测试
如果有人能帮忙的话，我们将不胜
浏览 1提问于2011-11-01得票数 1
8回答
是的，这确实是我关于jQuery UI自动完成的第三个或第四个问题。我最近的烦恼是，单击表单中的“提交”按钮似乎不算jQuery的“更改”。(隐藏的)输入已经有了一个值，输入一个无效的名称，然后单击或单击输入框中的选项卡就会清除这个值，但是如果您立即按了form Submit按钮，则但是，它似乎不算“更改”，而POST数据包含了以前的EmployeeNumber更新
最后，我通过使
浏览 2提问于2010-07-27得票数 4
回答已采纳
1回答
我的jQuery UI自动完成有一个奇怪的问题。我希望这样，当文本字段获得焦点时，自动完成中的所有选项列表都会出现。这是可行的，但是当通过单击来选择项目时，建议仍然是开放的。我希望建议列表消失，就像自动完成正常工作一样。
当您用键盘选择项目时，它工作得很好，但是当您单击a item时，列表就会一次又一次地重复出现。为了使这个问题
浏览 4提问于2013-10-04得票数 2
回答已采纳
2回答
我有一个带有jQuery UI自动完成的文本域。我想让用户输入一些东西，让自动完成显示选项，然后当用户单击一个选项时，我希望它触发模糊/聚焦输出，以指示用户已经选择了一个值。不幸的是，当单击自动完成选项时，jQuery UI似乎将焦点保持在文本字段上。
有什么办法解决这个问题吗？
浏览 3提问于2013-08-21得票数 1
1回答
嗨，我正在尝试将JEditable和JQuery UI自动完成放在一起，所以当我单击div时，div变得可编辑，并且输入的内容将具有自动完成功能，我尝试了与其他帖子不同的解决方案，例如
"focus",
"
浏览 5提问于2013-09-07得票数 1
回答已采纳
1回答
/jquery-ui.js"></script>
$("#autocomplete").focus(function
浏览 1提问于2017-10-11得票数 0
我在Jquery 1.4.2中使用jQuery UI Autocomplete 1.8.1，我遇到了这个问题。当用户使用鼠标select一个选择时，我不会做类似的事情。使用键盘时，一切正常，在输入文本框中选择后，值会出现，但使用鼠标时，它会坚持使用旧的(键入的)值，而不是选定的值<
浏览 2提问于2010-06-17得票数 5
回答已采纳
1回答
我正在尝试构建一个包含多个自动完成字段的表单。我使用jQuery-UI1.8.21通过.autocomplete绑定完成自动完成。我有5个不同的字段有自动完成绑定到他们，每个发送他们的建议到一个不同的div以外的表单，在页面的末尾。input type="text" name="bfield" /><
浏览 2提问于2012-06-12得票数 1
回答已采纳
我正在尝试以如下方式实现jQuery UI自动完成并且只有"alpha“作为我想要点击enter的提议，并且"alpha”应该是 url : 'myAjax.php',
浏览 0提问于2016-01-27得票数 0
回答已采纳
2回答
jQuery UI自动完成
、、、、
我使用的是jQuery UI的自动完成插件，一切都很好，除了当用户单击时，他们想要的值--我分配给"select:“方法的函数--在字段值更改之前触发。因此，如果我在输入字段中键入"Foo“，则单击"Foo Bar”的自动完成匹配函数将检测到所键入的值(在本例中为"Foo")，而不是从自动
浏览 3提问于2011-03-25得票数 2
回答已采纳
我有一个带有自动补全列的jqGrid (使用内联编辑)。当用户从自动完成列中选择一个值时，事件处理程序会在另一个列上设置一个值，还会将自动完成列上的值设置为自动完成源返回的label以外的值。} } }问题是，每当用户
浏览 5提问于2012-10-09得票数 0
回答已采纳
我的表单名为myForm，有两个元素下拉和自动完成()文本框。如果最终用户选择下拉列表上的值，并对自动完成(tokens)提供建议，然后单击apply按钮以获得匹配我们输入的搜索结果。我的屏幕输入：$("#myForm").submit(function(){
$('#myForm'
浏览 3提问于2014-06-17得票数 0
回答已采纳
1回答
我将用我创建的jQuery自动完成库替换jQuery自动完成库。$('.some_element').val('ui.item.id'); }我的新自动完成库如下所示： }
如何维护jQuery自动完成中的“select”功能？
浏览 4提问于2016-02-16得票数 0
回答已采纳
2回答
JQuery自动完成-选择第一项
、、、、
我正在使用jquery自动完成，它是我从ruby on rails应用程序中填充的，我正在创建一个自定义的自动完成，如下所示： $(".button-row").fadeIn(); }我将用户从另一个页面重定向到具有自动完成表单的页面我
浏览 3提问于2011-11-07得票数 5
回答已采纳
2回答
我想在选择后自动发送所选的自动完成选项，不需要点击提交按钮或单击框外，我尝试了"onchange“，但我必须在自动完成后单击”离开框“。下面是这些事件的进展情况：
打字：选择后：问题是，它只在我单击其他地方之后发送，我希望它在选择选项后自动发送。最后，下面是代码：
<link rel="stylesheet" href="htt
浏览 5提问于2022-02-23得票数 0
回答已采纳
我正在尝试的是：我做了什么：我有一个textbox，它通过jquery将id传递给控制器索引，并将listDetails作为模型传递给视图我尝试在控
浏览 1提问于2012-05-11得票数 0
5回答
我这里有一个来自的代码，它工作得很好，但是我找不到在文本视图中获得所选项的值的方法，我尝试了这样的方法，但是它不起作用$(document).ready(function () {doctype html>
<head> <title>jQuery UI Autocomplete - Defaul
浏览 5提问于2013-10-30得票数 19
回答已采纳
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
