MVC程序实现Autocomplete功能

原文: MVC程序实现Autocomplete功能

为了增强MVC的功力，增强练习是少不了的事情。Insus.NET此次想实现文本框的autocomplete功能。

在数据建立一张表[PinYin]：


插入一些数据：

INSERT INTO [dbo].[PinYin] ([Word]) VALUES ('a'),('ai'),('an'),('ang'),('ao'),
('ba'),('bai'),('ban'),('bei'),('ben'),('bi'),('bian'),('bie'),('bin'),('bing'),
('ca'),('cai'),('cang'),('cao'),('ceng'),('cha'),('chai'),('che'),('chen'),('cheng'),('chong'),('chou'),
('fa'),('fan'),('fang'),('fei'),('fen'),('feng'),('ga'),('gai'),('gan'),('gang'),('gao'),('ge'),('gei'),
('gen'),('geng'),('gong'),('gou'),('gu'),('gua'),('guai')
GO

View Code

并建立一个存储过程usp_PinYin_GetWord：



在MVC应用程序的Models目录下，建立一个PinYin model:



读取数据库数据，建立一个Entity，展开Entities目录：



接下来，在应用程序右键，启动Manage NuGet Packages...



安装jQuery UI:




它会把相关的css和js分别安装在应用程序的Content:


和scripts目录：

接下来，咱们须要建立一个Handler，它有点像Service同样，请求与处理用户所在文本框输入的文本。你先要在应用程序下建立一个Handlers目录，若是存在，可略过此步。

注意，上图代码第#10行代码，若是修改与添加了命名空间namespace，你还得打开Handler.ashx的markup添加与修改namespace:

如今咱们只是练习，在Controllers目录下，打开HomeController控制器建立一个ActionResult:

 

 一切写好，就能够写View视图了：

上面的代码中，#5步能够根据实际须要，最终显示于文本框中的是值仍是文本。

实时操做演示一下：