1.简单的下拉自动补齐,可以使用本地或远程数据源
<input name="autoTag" id="autoTag" />
var source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$('#autoTag').autocomplete({source: source});
source也可以指向后台的一个方法：
$('#autoTag').autocomplete({
source: '@(Url.Action("AutoCompleteOrderCode"))',
select: function (event, ui) {
// getFriendInfo(ui.item.value);
}
});
//自动匹配合同编号
[HttpGet]
public ContentResult AutoCompleteOrderCode(string term)
{
var service = new ProjectService();
var cmpOrderList = service.AutoCompleteCmpOrder(UserContext.Current.TenantId,term);
var content = "[" + string.Join(",", cmpOrderList.Select(q => "\""+ q.CmpSoCode+"\"")) + "]";
return new ContentResult(){Content = content};
}
2.自定义数据格式，包括id和text
<input name="autoTag" id="autoTag" /> <input type="hidden" id="autoTagId" />
var source = [{ value: "1", label: "C++" }, { value: "2", label: "java" }, { value: "3", label: "javascript" }, { value: "4", label: "ruby" }];
$('#autoTag').autocomplete({
source: source,
minLength: 0,
focus: function (event, ui) {
$("#autoTag").val(ui.item.label);
return false;
},
select: function (event, ui) {
$('#autoTag').val(ui.item.label);
$('#autoTagId').val(ui.item.value);
return false; //必须有这个
}
});