jquery、razor View 和 sql 数据库

Question

我是 asp.net 和 razor 的新手。我正在尝试让名为“产品”的字段自动完成数据库中的结果。

我已经创建了 autocomplete.cs 模型，并且票证 Controller 已经在项目中，所以我只是添加了操作。然后我在 new.cshtml 中添加了代码。我不知道哪里出了问题。如有任何帮助，我们将不胜感激。

问题是当我转到 new.cshtml 页面时，jquery 不起作用，文本框不执行任何操作。它搞砸了我用 jquery 隐藏的隐藏字段。它出现了。

这是自动完成.cs

using System;
using System.Web;
using System.Linq;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Configuration;

namespace HelpDesk.Models
{
public class PartNumber
{
    public string[] GetPartNumber()
    {
        List<string> partnumber = new List<string>();
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["RASConnectionString"].ConnectionString))
        {
            con.Open();
            SqlCommand comm = new SqlCommand("select * from pltjones.dbo.inv_master", con);
            SqlDataReader reader = comm.ExecuteReader();

            while (reader.Read())
            {
                partnumber.Add(reader["part_no"].ToString());
            }
        }
        return partnumber.ToArray();
    }
}

然后这是已经在此应用程序中制作的票证 Controller 。我正在做我添加的内容的一个片段。

  public ActionResult Autocomplete(string term)
    {
        var items = new PartNumber().GetPartNumber();

        var filteredItems = items.Where(
            item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0
            );
        return Json(filteredItems, JsonRequestBehavior.AllowGet);
    }

这是 Razor View new.cshtml

 <script type="text/javascript">
   $(document).ready(function () {
       $('#product')
    .each(function () {
        $(this).autocomplete({
            source: '@Url.Action("Autocomplete")'
        });
    });
   });

 <tr id="trEmail">
    <td colspan="2">
        <label for="product">Enter product: </label>
        <input type="text" name="product" id="product" />
</tr>

Answer 1

您还没有说明您正在使用什么自动完成功能，但在任何情况下都不需要调用 .each() 因为只有一个匹配项，所以只需使用它:

$('#product').autocomplete(... etc ...)

并且您没有提供任何代码来说明当有人选择某个项目时要执行的操作，例如

$('#product').autocomplete({
    source: // as above
    select: function (event, ui) {
        $("#product").val(ui.item.value);
    }
});