使用JQuery的MVC自动完成文本框

分享于 

8分钟阅读

Web开发

  繁體 雙語

介绍

在本文中,我将解释如何使用JQuery从数据库中填充自动完成 TextBox

当有很多行时,你可以在文本框中键入部分单词,然后它可以提供

类似于它的词。

背景

当你键入 TextBox 时,自动完成小部件提供建议。

我们需要一个文本框,用户在它的中键入国家名称时,会立即显示建议。

当用户从数据库中键入单词时。

数据库

步骤 1: 在存储国家名称的数据库中创建一个 table。 使用下面的SQL脚本来实现这里。

CREATEDATABASE MyDB;CREATETABLE [dbo].[tblCountry](
 [CountryName] [nvarchar](200) NULL,
 [ID] [int] IDENTITY(1,1) NOTNULL ) ON [PRIMARY];insertinto dbo.tblCountry(CountryName) values('Canada')insertinto dbo.tblCountry(CountryName) values('United States')insertinto dbo.tblCountry(CountryName) values('China')insertinto dbo.tblCountry(CountryName) values('Iran')insertinto dbo.tblCountry(CountryName) values('Brazil')

使用代码

步骤 2: 创建一个新项目 ASP.NET 4 Web应用程序

  • ""那就"Visual Studio 2013"。
  • 在这里,我们将为你的项目提供一个名称,如你所希望的,然后单击 。
  • 选择MVC空应用程序选项并点击 OK

步骤 3: 添加主控制器

1-Right单击控制器文件夹

2-Add控制器称为 HomeController

3-submit添加

现在打开 HomeController.cs 文件并将以下代码写入主控制器类,从控制器获取和返回Json类型,如下所示。

public ActionResult Index()
 {
 return View();
 }
 public JsonResult GetCountry(string countryName)
 {
 var cn = new SqlConnection();
 var ds = new DataSet();
 string strCn = ConfigurationManager.ConnectionStrings["ConnString"].ToString();
 cn.ConnectionString = strCn;
 var cmd = new SqlCommand
 {
 Connection = cn,
 CommandType = CommandType.Text,
 CommandText = "select CountryName from tblCountry
 Where CountryName like @myParameter and CountryName!=@myParameter2" };
 cmd.Parameters.AddWithValue("@myParameter", "%" + countryName + "%");
 cmd.Parameters.AddWithValue("@myParameter2", countryName );
 try {
 cn.Open();
 cmd.ExecuteNonQuery();
 var da = new SqlDataAdapter(cmd);
 da.Fill(ds);
 }
 catch (Exception)
 {
 }
 finally {
 cn.Close();
 }
 DataTable dt = ds.Tables[0];
 var txtItems = (from DataRow row in dt.Rows
 select row["CountryName"].ToString()
 into dbValues
 select dbValues.ToLower()).ToList();
 return Json(txtItems, JsonRequestBehavior.AllowGet);
 }

在 上面 代码中,我使用 ADO.NET 来从数据库中获取数据,但是可以使用它的他方法,而不是 ADO.NET。

步骤 4: 添加jQuery参考有很多方法可以将jQuery库的引用添加到我们的项目中。 以下是一些方法:

  • 使用NuGet软件包管理器,你可以在项目中安装库和引用
  • 使用微软。jQuery。谷歌或者其他需要主动互联网连接的CDN库。
  • 从jQuery官方网站下载jQuery文件并引用到项目中。

在本例中,我将使用 jQuery。

收费 : 创建jQuery函数以调用控制器JSON操作方法并调用autocomplete功能,

<script type="text/javascript">
 var textbox;
 var selectValue;
 $(function () {
 textbox = $("#txtCountrty");
 selectValue = $('ul#selectedValue');
 textbox.on("input", function () {
 getAutoComplete(textbox.val());
 });
 });
 function getAutoComplete(countryName) {
 var uri = "Home/GetCountry";
 $.getJSON(uri, { countryName: countryName })
. done(function (data) {
 selectValue.html("");
 var count = 0;
 $.each(data, function (key, item) {
 //$('<option>').text(item).appendTo('#selectedValue');var li = $('<li/>').addClass('ui-menu-item').attr('role', 'menuitem')
. html("<a href='#' onclick="setText('" + item + "')">" + item + "</a>")
. appendTo(selectValue);
 count++;
 });
 });
 }
 function setText(text) {
 textbox.val(text);
 getAutoComplete(text);
 }
</script>

工作 上面 函数不要忘记添加以下 jQuery CDN库的引用,

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

步骤 6: 右击 View() 并添加名为索引的视图并将 below 代码放入视图。 添加代码必要的文件和逻辑后,Index.cshtml 将如下所示:

@{ ViewBag.Title = "Index";
}<style> input[type="text"], select {
 width: 250px; }
 a:link, a:active, a:visited, a:hover {
 text-decoration: none;color: black; }
 /*--- DROPDOWN ---*/ #navul {
 list-style: none;position: absolute;padding: 0;margin: 0;list-style-type: none; }</style><scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script><scripttype="text/javascript">var textbox;
 var selectValue;
 $(function () {
 textbox = $("#txtCountrty");
 selectValue = $('ul#selectedValue');
 textbox.on("input", function () {
 getAutoComplete(textbox.val());
 });
 });
 function getAutoComplete(countryName) {
 var uri = "Home/GetCountry";
 $.getJSON(uri, { countryName: countryName })
. done(function (data) {
 selectValue.html("");
 var count = 0;
 $.each(data, function (key, item) {
 //$('<option>').text(item).appendTo('#selectedValue');var li = $('<li/>').addClass('ui-menu-item').attr('role', 'menuitem')
. html("<a href='#' onclick="setText
 ('" + item + "')">" + item + "</a>")
. appendTo(selectValue);
 count++;
 });
 });
 }
 function setText(text) {
 textbox.val(text);
 getAutoComplete(text);
 }</script><h2>MVC AutoComplete Sample</h2><divid="nav"><inputtype="text"id="txtCountrty"/><ulid="selectedValue"></ul></div>

configuration 标记中的webconfig 中,最后步骤 7:,将你的连接字符串放入:

<connectionStrings><addname="ConnString"connectionString="Data Source=(local);
 Initial Catalog=MyDB; UID=sa; pwd=123; Integrated Security=True;"providerName="System.Data.SqlClient"/></connectionStrings>

现在运行应用程序并键入任何单词,然后它将自动填充从第一个单词开始的记录

摘要

我希望这篇文章对所有读者都有用。 如果你有建议,请联系我。


AUTO  文本  TEX  自动完成  
相关文章