就像标题中所述,我在使jqueryUI自动完成小部件工作时遇到了一些问题。
听起来很傻,但我却没有。我已经开发了几年的C#,现在,从一个月左右开始,就尝试使用ASP和JQuery进行开发。只是为了展示,我搜索了网络,尤其是stackoverflow,并尝试了很多以使其运行。
好的,这里是代码。
定义文本框:
<asp:TextBox ID="txtSearchbox"
style="float:left;padding:5px 1px 5px 1px;" runat="server" >
</asp:TextBox>
AutoComplete Jquery脚本部分:
<script type="text/javascript">
$(document).ready(function () {
$('#txtSearchbox').autocomplete( {
source: function (request, response) {
//console.log(request.term);
$.ajax
({
url: "AutoComplete.asmx/GetSearchInfo",
data: "{ 'prefixText': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) {
//console.log(data.toString());
//alert(data.toString());
return data;
},
success: function (data) {
// console.log(data.d.toString());
response($.map(data.d, function (item) {
// console.log(item.Isin)
// console.log(item.Name)
return
{
label: item.Name.toString()
value: item.Name.toString()
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2
});
});
</script>
AutoComplet.asmx:
[WebMethod]
public List<SearchObject> GetSearchInfo(string prefixText)
{
var seo = new SearchObject();
var getSeo = staticList.getSEOlist().Where(str => str.SearchString.ToLower().Contains(prefixText.ToLower()));
return getSeo.ToList();
}
为了完整起见,CSS:
/*AutoComplete flyout */
.autocomplete_completionListElement
{
margin:0px!important;
background-color:#ffffff;
color:windowtext;
border:buttonshadow;
border-width:1px;
border-style:solid;
cursor:'default';
overflow:auto;
height:200px;
font-family:Tahoma;
font-size:small;
text-align:left;
list-style-type:none;
padding: 5px 5px 5px 5px;
}
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
background-color:#ffff99 ;
color:black;
padding:0px;
}
/* AutoComplete item */
.autocomplete_listItem
{
background-color:window;
color:windowtext;
padding:0px;
}
如果您需要更多,请告诉我。
调试行过时。
如果我检查jquery部分,我会得到我想要的数据,但不会在txtsearch中显示。
而且我并不真正了解该AutoComplete jquerUI方法将如何显示该列表,但是编码应该是正确的。
最佳答案
实际上,您可能是非常讨厌的JavaScript功能(称为自动分号插入)的受害者。成功回调/ jQuery映射函数中的return语句写错了。
return
{
label: item.Name.toString()
value: item.Name.toString()
}
这应该是正确的语法:
return {
label: item.Name.toString()
value: item.Name.toString()
}
JavaScript编译器在第一种情况下会在return语句后添加一个自动分号,从而使其不返回任何内容/未定义。
This SO question很好地概述了此行为的规则。
关于c# - asp.net jqueryUI自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10818606/