1

我正在文本框中实现 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>"

一切似乎都正常，除了 LINQ 查询FindCustomerByName不返回任何记录，即使它们存在。

任何人都可以提出可能是什么问题或提出更好的自动完成方法吗？

我查看了许多示例并将其拼凑在一起。

4

2 回答 2

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" })

并且您的操作需要通过允许返回中的 Get 来允许 Json 返回

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

除了我看到的唯一另一件事是contentType: "application/json; charset=utf-8"在您的 ajax 请求中丢失。尝试在您的部分中的语句alert(data);之前放置一个。如果这没有命中，那么 Ajax 就会出错responsesuccess

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

我已经使用您的原始代码和下面的代码进行了分析。如果您观看 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;
}
于 2012-06-02T19:53:27.590 回答
1

您正在从一个空列表中获取结果：

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

你可能需要类似的东西：

List<Models.Customer> cust = .......  <- call your db code here.
于 2012-06-02T20:38:27.340 回答