ASP.NET MVC使用jQuery实现Autocomplete

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Insus.NET的以前的ASP.NET MVC的练习中，也有实现过Autocomplete的功能。依次是使用jQuery来实现。

首先在数据库准备一些数据：

CREATE TABLE [dbo].[Item]
(
[Item_nbr] INT IDENTITY(1,1) PRIMARY KEY NOT NULL,
[ItemName] NVARCHAR(40)
)GOINSERT 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')GOCREATE 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;
}
})
});