ASP.NET MVC使用jQuery实现Autocomplete

时间:2021-10-26 03:15:53

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

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

ASP.NET MVC使用jQuery实现Autocomplete

 

ASP.NET MVC使用jQuery实现AutocompleteASP.NET MVC使用jQuery实现Autocomplete
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:

ASP.NET MVC使用jQuery实现Autocomplete

 

再创建一个Entity:

ASP.NET MVC使用jQuery实现Autocomplete

 

创建视图操作Action:

ASP.NET MVC使用jQuery实现Autocomplete

 

安装jQueryUI:

ASP.NET MVC使用jQuery实现Autocomplete

 

创建MVC视图:

ASP.NET MVC使用jQuery实现Autocomplete

 

上面标记#3是jQuery代码,详细如下:
ASP.NET MVC使用jQuery实现Autocomplete

 

ASP.NET MVC使用jQuery实现AutocompleteASP.NET MVC使用jQuery实现Autocomplete
$(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

 

实时操作演示:
ASP.NET MVC使用jQuery实现Autocomplete