我的jquery自动完成功能不工作
本文关键字:功能 工作 成功 jquery 我的 | 更新日期: 2023-09-27 18:14:10
假设我使用ajax从asmx文件中获取对象列表,然后将对象列表解析为json对象,输出将如下所示
[
{
"UserName": "hl",
"FirstName": "hendra",
"LastName": "lim"
},
{
"UserName": "wd",
"FirstName": "wildan",
"LastName": "dan"
},
{
"UserName": "gd",
"FirstName": "genin",
"LastName": "gn"
},
{
"UserName": "tr",
"FirstName": "tere",
"LastName": "magda"
}
]
但是我的自动完成功能不工作。
下面是我的代码: var param;
var resultarr;
$(document).ready(function ()
{
param = document.getElementById('MainCT_dtvJobVac_PIC').value;
$.ajax({
type: 'POST',
contentType: 'application/json;',
data: '{keyword:' + JSON.stringify(param) + '}', // param in case utk lempar parameter.
dataType: 'json',
url: 'SvcUserList.asmx/GetUserList',
success: function (result)
{
resultarr = result.d;
$('#<%#dtvJobVac.FindControl("PIC").ClientID%>').autocomplete
({
minLength: 0,
source: resultarr,
focus: function (event, ui) {
$("#MainCT_dtvJobVac_PIC").val(ui.item.FirstName);
return false;
},
select: function (event, ui) {
$("#MainCT_dtvJobVac_PIC").val(ui.item.FirstName);
//$("#<%#dtvJobVac.FindControl("PICKey").ClientID%>").val(ui.item.UserName);
//$("#results").text($("#<%#dtvJobVac.FindControl("PICKey").ClientID%>").val());
return false;
}
});
}
})
});
web服务代码:
[WebMethod]
public string GetUserList(string keyword)
{
List<ADUserData> tes = new List<ADUserData>();
ADUserData obj;
obj = new ADUserData();
obj.UserName = "hl";
obj.FirstName = "hendra";
obj.LastName = "lim";
tes.Add(obj);
obj = new ADUserData();
obj.UserName = "wd";
obj.FirstName = "wildan";
obj.LastName = "dan";
tes.Add(obj);
obj = new ADUserData();
obj.UserName = "gd";
obj.FirstName = "genin";
obj.LastName = "gn";
tes.Add(obj);
obj = new ADUserData();
obj.UserName = "tr";
obj.FirstName = "tere";
obj.LastName = "magda";
tes.Add(obj);
JavaScriptSerializer jss = new JavaScriptSerializer();
string output = jss.Serialize(tes);
return output;
}
修正吗?我哪里做错了?谢谢。
顺便说一句,我把这些jquery链接SRC在我的主站,有什么东西与版本?还是别的什么?谢谢。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><'/script>')</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
您的代码中有以下问题,
- 自动完成的选择器不正确
- JSON格式不支持自动完成
这是解决方案,
$('#<%= dtvJobVac.FindControl("PIC").ClientID%>').autocomplete({
source: availableTags,
select: function (event, ui) {
$(this).val(ui.item.UserName);
return false;
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.UserName + "</a>")
.appendTo(ul);
};
以上代码将更新自动完成以支持UserName
属性。您可以在代码中更改属性名称。
现在你只有一件事要做。你必须强制jQuery支持你的JSON格式。
$.extend($.ui.autocomplete, {
filter: function (array, term) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
return $.grep(array, function (value) {
return matcher.test(value.UserName || value.FirstName || value.LastName || value.label || value.value || value);
});
}
});
都完成了。现在你的代码应该可以工作了:)下面是工作示例
1 -我想你忘记将result
变量解析为json了。
success: function (result)
{
var resultarr = jQuery.parseJSON(result);
2 - resultarr变量没有jQuery自动完成数据源的结构:
[{"标签":"Choice1"、"价值":"value1"},…)