ASP.NET MVC使用jQuery实现Autocomplete
程序员文章站
2022-03-06 21:14:46
Insus.NET的以前的ASP.NET MVC的练习中,也有实现过Autocomplete的功能。依次是使用jQuery来实现。 首先在数据库准备一些数据: 转到ASP.NET MVC项目中,创建一个model: 再创建一个Entity: 创建视图操作Action: 安装jQueryUI: 创建M ......
insus.net的以前的asp.net mvc的练习中,也有实现过autocomplete的功能。依次是使用jquery来实现。
首先在数据库准备一些数据:
create table [dbo].[item]
(
[item_nbr] int identity(1,1) primary key not null,
[itemname] nvarchar(40)
)
go
insert into [dbo].[item]
(
[itemname]
)
values
('q04-aa-0001'),('q04-aa-0002'),('q04-aa-0003'),('q04-aa-0004'),('q04-aa-0005'),
('q04-bb-0001'),('q04-bb-0002'),('q04-bb-0003'),('q04-bb-0004'),('q04-bb-0005'),
('q04-cc-0001'),('q04-cc-0002'),('q04-cc-0003'),('q04-cc-0004'),('q04-cc-0005'),
('q04-dd-0001'),('q04-dd-0002'),('q04-dd-0003'),('q04-dd-0004'),('q04-dd-0005'),
('q04-ee-0001'),('q04-ee-0002'),('q04-ee-0003'),('q04-ee-0004'),('q04-ee-0005'),
('q04-ff-0001'),('q04-ff-0002'),('q04-ff-0003'),('q04-ff-0004'),('q04-ff-0005')
go
create procedure [dbo].[usp_item_getall]
as
select [item_nbr],[itemname] from [dbo].[item]
go
source code
转到asp.net mvc项目中,创建一个model:
再创建一个entity:
创建视图操作action:
安装jqueryui:
创建mvc视图:
上面标记#3是jquery代码,详细如下:
$(function () {
var cache = {};
$("#itemname").autocomplete({
minlength: 0,
source: function (request, response) {
var term = request.term;
if (term in cache) {
data = cache[term];
response($.map(data, function (item) {
return {
label: item.itemname,
value: item.item_nbr
}
}));
}
else {
$.ajax({
url: "/july16/autocomplete",
datatype: "json",
type: "post",
contenttype: "application/json; charset=utf-8",
data: json.stringify({
top: 10,
term: request.term
}),
success: function (data) {
if (data.length) {
cache[term] = data ;
response($.map(data, function (item) {
return {
label: item.itemname,
value: item.item_nbr
}
}));
}
}
});
}
},
focus: function (event, ui) {
$("#itemname").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#itemname").val(ui.item.label);
$("#itemnbr-id").val(ui.item.value);
return false;
}
})
});
source code
实时操作演示: