欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

  实时操作演示: