琴早妃,云天空作品集,1cc等于多少ml
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
实时操作演示:
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论