MVC Program implements AutoComplete function

In order to strengthen the skill of MVC, strengthen the practice is the thing. Insus.net this time to realize the AutoComplete function of the text box.

Create a table in data [PinYin]:


Insert some data:

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

and create a stored procedure Usp_pinyin_getword:



Under the models directory of the MVC application, create a pinyin model:



Read the database data, create an entity, expand the Entities directory:



Next, in the application right-click, start Manage NuGet Packages ...



To install the jquery UI:




It will install the relevant CSS and JS separately in the application content:


and Scripts Directories:

Next, we need to create a handler, which is a bit like a service that requests and processes the text entered in the text box where the user is located. You first need to create a handlers directory under the application, and if so, skip this step.

Note that code # # # line code, if modified with added namespace namespace, you also have to open HANDLER.ASHX markup Add and modify namespace:

Now we're just practicing, in the Controllers directory, open the HomeController controller to create a actionresult:

When everything is well written, you can write the view:

The above code, #5步可以根据实际需要, is the value or text that is ultimately displayed in the text box.

Real-time Operation Demo: