Question

我正在文本框中实现jQuery自动完成功能，如果我的代码看起来正确，我很好奇。

这是我视野中的文字框。

<div class="editor-field">
  @Html.TextBoxFor(model => model.Customer.CustomerName,  
                                      new {id = "CustByName" })
</div>

以下是为文本框ID实现自动填充功能的javascript。

$(document).ready(function () {
$("#CustByName").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Cases/FindByName", type: "GET", dataType: "json",
            data: { searchText: request.term, maxResults: 10 },
            success: function (data) {
                response($.map(data, function (item) {
                    return { 
                       label: item.CustomerName, 
                       value: item.CustomerName, 
                       id: item.CustomerID }
                }))
            }
        })
    }
});

}）;

以下是javascript调用的控制器操作：

public JsonResult FindByName(string searchText, int maxResults)
{
   CustomerFind find = new CustomerFind();
   var result = find.FindCustomerByName(searchText, maxResults);
   return Json(result);
}

以下是CustomerFind中名为FindCustomerByName的函数：

internal List<Models.Customer>  
               FindCustomerByName(string searchText, int maxResults)
{
        List<Models.Customer> cust = new List<Customer>();
        var result = from c in cust
                    where c.CustomerName.Contains(searchText)
                    orderby c.CustomerName 
                    select c;
        return result.Take(maxResults).ToList();
}

以下是我在布局cshtml文件中的脚本引用。

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/rls-functions.js")" type="text/javascript"></script>"

除了FindCustomerByName中的LINQ查询并不返回任何记录（即使它们存在）外，一切似乎都运行正常。

任何人都可以提出可能存在的问题或建议更好的自动填充方法吗？

我看过很多例子并拼凑在一起。

Answer 1

第二次更新。发现了一些语法错误

$(document).ready(function () {
    $("#CustByName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { 
                           label: item.CustomerName, 
                           value: item.CustomerName, 
                           id: item.CustomerID }
                    })); // <--- semicolon here
                }
            }); // <--- semicolon here
        },
        minLength: 3 // <-- sets the minimum number of characters to type before ajax fires
    });
});

基于OP的更新没有他从

获取数据的数据库上下文

以下是使用EF对数据库进行查询的示例。首先必须创建数据库上下文，然后在代码中使用该上下文。

public IList<Lender> GetLenders(string partialText) {
    IList<Lender> lenders;

    // Create data connection to the LINQ to SQL class that represents the database
    using (DBDataContext dataContext = new DBDataContext()) {

        // Get all lenders where lender name contains partial text and put them into new Lender objects
        // The final call .ToList() puts all the Lender objects into a collection that can be enumerated
        lenders = (from data
                        in dataContext.LenderDBs
                    orderby data.LenderName
                    where data.IsActive == true
                        && data.LenderName.ToLower().Contains(partialText.ToLower())
                    select new Lender {
                        LenderName = data.LenderName,
                        URL = data.URL
                    }).Take(15).ToList();
    }
    return lenders;
}

您的TextBoxFor缺少创建自动填充功能class="ui-widget"的类，但也要确保您的布局中有此脚本用于下拉列表的样式

<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

@Html.TextBoxFor(model => model.Customer.CustomerName,  
                                  new {id = "CustByName", @class = "ui-widget" })

你的行动需要允许Json返回，允许Get in the return

public JsonResult FindByName(string searchText, int maxResults)
{
   CustomerFind find = new CustomerFind();
   var result = find.FindCustomerByName(searchText, maxResults);
   return Json(result, JsonRequestBehavior.AllowGet);
}

除了我所看到的唯一其他内容，您的ajax请求中缺少contentType: "application/json; charset=utf-8"。尝试在alert(data);部分的response语句前面加success。如果没有，那么Ajax就出错了

另外，作为一个单独的问题，您要发送maxResults来返回您的数据，但您的数据实际上是返回searchText匹配的所有行，然后一旦它到达您的客户端，那么它就是取maxResults。我会更改它，以便maxResults成为查询的一部分，因此您不会返回超出需要的数据。实际上，我将maxResults作为可配置选项放在web.config文件中。用户界面不需要关注这样的规则。

我使用类似你的orignal和代码的代码进行了分析。如果您观察SQL Server执行，服务器将返回与您上面的代码匹配的所有行。但是下面的代码将创建一个Top 10子句，以便只返回10行

internal List<Models.Customer>  FindCustomerByName(string searchText, int maxResults)
{
        List<Models.Customer> cust = new List<Customer>();
        var result = (from c in cust
                    where c.CustomerName.Contains(searchText)
                    orderby c.CustomerName 
                    select c).Take(maxResults).ToList();
        return result;
}

Answer 2

您从空列表中获取结果：

List<Models.Customer> cust = new List<Customer>();

您可能需要以下内容：

List<Models.Customer> cust = .......  <- call your db code here.

返回一个List＆lt;＆gt;来自EF MVC3中的模型

2 个答案: