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步能夠根據實際須要，最終顯示於文本框中的是值仍是文本。

實時操做演示一下：