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)
)

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

　　实时操作演示：