ASP.NET MVC with jQuery Auto-complete Textbox

ASP.NET MVC with jQuery Auto-complete Textbox

最近在看新專案要做的功能,因為是採用MVC開發,所以以前用Ajax Controll ToolKit偷懶的功能都不能用了。

今天小小研究了一下如果在MVC裡面要達到Textbox有自動完成的功能要怎麼處理~

先來看一下功能畫面:

image

首先要引入jQuery 及 autocomplete 這二隻js檔。然後接下來只要…

頁面功能的HTML:

<div>
	<%= Html.TextBox("city")%>
</div>

<script type="text/javascript">
	$(function()
	{
		$("#city").autocomplete('<%= Url.Action("Find", "Home") %>');
	});

</script>

MVC C# Code

q是autocomplete送出的查詢字串,而回傳的內容以換行符號區隔即可。

public ActionResult Find(string q)
{
	if (q == null) q = "";
	string[] cities = { "Mary", "Shelly", "Carly", "March", "Apple", "Saly", "Shery" };
	return Content(String.Join("\r\n", cities.Where(p => p.Contains(q)).ToArray()));
}

image

是不是非常簡單呢XD

註:該外掛UI會自動把內容轉小寫,所以要特別注意哦!

 

相關連結:

jQuery Auto-Complete Text Box with ASP.NET MVC

jQuery plugin: Autocomplete