Question

I’ve followed this tutorial…

My Controller’s method “Name” is never call…

Here is the code:

View

<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function () {
          $("#Name").autocomplete('@Url.Action("Name", "Reservation")', { minChars: 3   });//Never call... When I put a simple alert, it works !
});
</script>

<div class="editor-label">
    @Html.LabelFor(model => model.Customer.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Customer.Name)

</div>

Controller method

public ActionResult Name(string q)
{
        var customers = (from c in db.Customers where c.Name.Contains(q) select c.Name).Distinct().Take(10);
        string content = string.Join<string>("\n", customers);
        return Content(content);
}

I’m lost… Can you help me to find what I’m doing wrong please ? Thanks in advance…

Finally he reaches my controller’s method ! But He never display the list corresponding to the input text 🙁

Update 16:04

Answer 1

The ID for the input generated by:

@Html.EditorFor(model => model.Customer.Name)

Won’t just be Name, it will be Customer_Name:

$(document).ready(function () {
          $("#Customer_Name").autocomplete('@Url.Action("Name", "Reservation")', { minChars: 3   });//Never call... When I put a simple alert, it works !
});

---

There seems to be some confusion here, the tutorial you’re following uses jQuery Autocomplete but you appear to be using jQuery UI autocomplete. Both are slightly different, using the default options:

jQuery-UI Autocomplete

(http://jqueryui.com/demos/autocomplete/):

<script type="text/javascript">
    $(document).ready(function () {
        $("#Customer_Name").autocomplete({ source: '@Url.Action("Name", "Reservation")', minLength: 3 });
    });
</script>

public ActionResult Name(string term)
{
    var customers = ...get a list of customer names filtered by term
    return Json(customers, JsonRequestBehavior.AllowGet);
}

jQuery Autocomplete

(https://github.com/dyve/jquery-autocomplete)

<script type="text/javascript">
    $(document).ready(function () {
        $("#Customer_Name").autocomplete('@Url.Action("Name", "Reservation")', { minChars: 3 });
    });
</script>

public ActionResult Name(string q)
{
    var customers = ...get a list of customer names filtered by q
    return Content(string.Join("\n", customers));
}