Question

I am implementing jQuery autocomplete in a text box and I am curious if my code looks right.

Here is my textbox from my view.

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

Here is the javascript to implement autocomplete for the textbox id.

$(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 }
                }))
            }
        })
    }
});

});

Here is the controller action called by the javascript:

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

Here is the function in CustomerFind called 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();
}

Here is what I have in my layout cshtml file for script reference.

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

Everything seems to work ok, except the LINQ query in FindCustomerByName does not return any records even though they exist.

Can anyone suggest what might be the issue or suggest a better way to do autocomplete?

I have looked at numerous examples and cobbled this together.

Answer 1

Second update. Found a couple syntax errors

$(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
    });
});

Update based on OP not having a db context that he is getting data from

Here is an example of making a query to the Database using EF. A database context has to be created first and then you use that context here in code.

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;
}

---

Your TextBoxFor is missing the class that creates the Autocomplete feature class="ui-widget" but also make sure that you have this script in your layout for the styling of the dropdown

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

And your action needs to allow for Json return by allowing the 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);
}

Aside from all that the only other thing I see is contentType: "application/json; charset=utf-8" missing in your ajax request. Try putting an alert(data); just before the response statement in your success section. If that doesn’t hit then Ajax is erroring

---

Also, as a separate concern, you are sending in maxResults to return your data, but your data is actually returning all rows where searchText matches and then once it gets to your client it is then taking the maxResults. I’d change that so that maxResults was part of your query so you aren’t returning more data than needed. Actually, I’d put maxResults as a configurable option in the web.config file. The UI doesn’t need to concern itself with rules like that.

I’ve profiled using code like your orignal and code like below. If you watch SQL Server execution the server will return all rows with match with the code you had above. But the code below will create a Top 10 clause so that only 10 rows are returned

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;
}