拦截和预处理 jQuery-ui 自动完成数据
Intercept and pre-process jQuery-ui autocomplete data
我有一个Jquery UI自动完成代码,它从ajax请求中获取数据,当我抓取数据时,结果已经放在附加自动完成的输入框中。 我的问题是我还有其他数据,这些数据将与自动完成的结果一起发布。
我试图抓住我需要的所有东西,并把它放在一个带有分量仪的字符串中,这样我就可以在客户端拆分()它。我想将其他数据保存在隐藏的文本字段中
这是我的代码
<div id="01ac091c834d81b41f0ef4b6eb09cde90bb9aa1a" style="display:none" title="Add Member">
Type the name of the member
<br>
<br>
<div style="text-align:center">
<input type="text" id="txtUserFind" size="35">
</div>
<input type="hidden" id="hidtxtUserFind-nickname">
<input type="hidden" id="hidtxtUserFind-userhash">
<input type="hidden" id="hidtxtUserFind-picture">
<input type="hidden" id="hidtxtUserFind-sex">
</div>
<script type="text/javascript">
head(function() {
$(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled");
$("#txtUserFind").keydown(function(){
$(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled");
});
$("#txtUserFind").change(function(){
var userdetails = $("#txtUserFind").val().split(";");
alert($("#txtUserFind").val());
/*
0 profiles.nickname,
1 profiles.firstname,
2 profiles.surname,
3 users.user_hash,
4 profiles.sex,
5 profiles.picture
*/
$("input#hidtxtUserFind-nickname").val(userdetails[0]);
$("input#txtUserFind").val(userdetails[1] + " " + userdetails[2]);
$("input#hidtxtUserFind-userhash").val(userdetails[3].replace("u-",""));
$("input#hidtxtUserFind-sex").val(userdetails[4]);
if(userdetails.length > 5){
$("input#hidtxtUserFind-picture").val(userdetails[5]);
}
});
$("<?php echo $tagmemberbtn; ?>").click(function(){
$("#01ac091c834d81b41f0ef4b6eb09cde90bb9aa1a").dialog({
modal:true,
resizable: false,
height:250,
width:400,
hide:"fade",
open: function(event, ui){
searchdone = false;
$(":button:contains('Select User')").attr("disabled","disabled").addClass("ui-state-disabled");
},
beforeClose: function(event, ui){
$("#txtUserFind").val("");
},
buttons:{
"Select User":function(){
$(this).dialog("close");
},
"Close":function(){
searchdone = false;
$("#txtUserFind").val("");
$(this).dialog("close");
}
}
});
});
$(function() {
var cache = {},
lastXhr;
$("#txtUserFind").autocomplete({
source:function(request,response) {
var term = request.term;
if ( term in cache ) {
response(cache[term]);
return;
}
lastXhr = $.getJSON(cvars.userburl+"getusers", request, function(data,status,xhr) {
stopAllAjaxRequest();
cache[ term ] = data;
if ( xhr === lastXhr ) {
response( data );
}
});
},
minLength: 1,
select: function(event, ui) {
$(":button:contains('Select User')").removeAttr("disabled").removeClass("ui-state-disabled");
}
}).data("autocomplete")._renderItem = function(ul,item){
if(item.picture==null){
//know if girl or boy
if(item.sex<=0){
item.picture = cvars.cthemeimg + "noimagemale.jpg";
}
else{
item.picture = cvars.cthemeimg + "noimagefemale.jpg";
}
}
else{
item.picture = cvars.gresuser + "hash=" + item.user_hash.replace("u-","") +"&file="+item.picture.replace("f-","");
}
var inner_html = '<a><div class="autocomplete-users-list_item_container"><div class="autocomplete-users-image"><img src="' + item.picture + '" height="35" width="35"></div><div class="label">' + item.nickname + '</div><div class="autocomplete-users-description">' + item.firstname + " " + item.surname + '</div></div></a>';
return $("<li></li>")
.data("item.autocomplete",item)
.append(inner_html)
.appendTo(ul);
};
});
});
你的想法是对的,你必须使用回调作为source
参数。我在这里举了一个例子:
jsFiddle 上的演示
如果您仔细阅读文档,它会说:
第三种变体,即回调,提供了最大的灵活性,并且 可用于将任何数据源连接到自动完成。回调 获取两个参数:
一个请求对象,具有一个名为"term"的单个属性,它引用 到文本输入中的当前值。例如,当用户 在城市字段中输入"new yo",自动完成项将等于 "新哟"。
响应回调,它期望单个参数包含 向用户建议的数据。此数据应根据 提供的期限,并且可以采用上述任何格式 简单的本地数据(字符串数组或带有标签/值/两者的对象数组 属性)。在提供自定义源回调时,这一点很重要 在请求期间处理错误。您必须始终调用响应 即使遇到错误,也会回调。这可确保小部件 始终具有正确的状态。
所以这是我在演示中使用的一个示例实现:
$("#autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
url: "/echo/html/", // path to your script
type: "POST", // change if your script looks at query string
data: { // change variables that your script expects
q: request.term
},
success: function(data) {
// this is where the "data" is processed
// for simplicity lets assume that data is a
// comma separated string where first value is
// the other value, rest is autocomplete data
// the data could also be JSON, XML, etc
var values = data.split(",");
$("<div/>").text("Other value: " + values.shift()).appendTo("body");
response(values);
},
error: function() {
response([]); // remember to call response() even if ajax failed
}
});
}
});
您可以在选择中包含函数。 在该函数中,您可以根据需要访问所选项目和流程的值和标签:
$('#input_id').autocomplete({
source:"www.example.com/somesuch",
select: function(event, ui){
var value = ui.item.value;
valueArray = value.split('whatever delimiter here');
//do what you will with the values
ui.item.value = ui.item.label; //This ensures only the label is displayed after processing.
}
});
相关文章:
- jQuery UI中的动态url,数据表
- 带有两个句柄的 jQuery UI 滑块 - 获取初始数据
- 如何在 jquery ui 自动完成自定义数据中删除焦点并显示
- JQuery UI 自动完成 - 无法获取输入字段中键入的数据
- 防止 (jquery ui) 数据选取器翻转到当前月份
- 在 jQuery UI 对话框中加载和编辑数据
- 如何更改 jquery UI 数据选择器的样式 (CSS)
- 拦截和预处理 jQuery-ui 自动完成数据
- jQuery UI并将数据加载到选项卡中
- jQuery UI自动完成响应数据
- 带有自定义格式的C#Web服务json数据jquery ui
- 使用JQuery UI自动完成从JSON搜索数据不起作用
- 在 jquery ui 中作为范围滑块的高数据
- 如何将数据从ajax传递到Jquery UI自动完成
- 正在Jquery UI数据选择器上设置日期格式
- 将数据变量从PHP传递到jquery ui对话框
- 数据绑定JQuery UI DatePicker
- Jquery UI自动完成显示所有数据
- 如何在jQuery-UI Datepicker中重载数据
- JQuery UI模态表单对话框保存数据到数据库