CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Casper
Casper

Reputation: 193

Autocomplete using jQuery/AJAX combination under ASP.NET MVC 3 fails (on some inputs)

I have a searchfield for searching between employees. The code for the view looks like this:

<input id="employeeSearchText" name="employeeSearchText" type="text" autocomplete="off" />  

<script type="text/javascript" language="javascript">
    $("#employeeSearchText").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Medarbejdere/Soeg",
                type: "POST",
                dataType: "json",
                data: { searchText: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Firstname + " " 
                 + item.Lastname, value: item.description, id: item.description }
                    }))
                }
            })
        }
    });
</script>

The path "/Medarbejdere/Soeg" is defined in the controller as:

[HttpPost]
public JsonResult Soeg(string searchText)
{
    EmployeeRepository repo = new EmployeeRepository();
    var result = repo.SearchByKeywords(searchText.Trim(), 10);
    return Json(result, JsonRequestBehavior.AllowGet);
}

My problem is that for some inputs, the result never shows up. Actually typing just one letter and waiting for the input, the same 5 letters of the english alphabet never gives back a result, consistently.

Putting a breakpoint in the "Soeg" action is correctly reached for all inputs and repo.SearchByKeywords() also returns the correct result for all inputs, but for some reason, when the result is returned to the AJAX call, it never renders.

I have absolutely no idea how to go about debugging at this stage. I use the MVC mini-profiler, which shows the following behaviour (assuming the letter 'c' does not give results and the letter 'e' does)

Typing 'e' will fire a call to the action, trigger the breakpoint and the mvc-mini-profiler debug information on the left side of the browser will show how long the call took. Typing 'c' will fire a call to the action, trigger the breakpoint but will NOT show up in the mvc-mini-profiler debug window.

Now if I type another 'c' so that the search string is "cc", the profiler will actually show two calls to the action, but ONLY upon typing the second 'c'

Any ideas for a solution or even suggestions as to how I further debug the problem?

Thanks in advance!

Upvotes: 1

Views: 1425

Answers (1)

Casper
Casper

Reputation: 193

Apparently the issue was caused by the result from repo.SearchByKeywords().

While the result was correct, it would somehow break the autocomplete on some inputs upon being returned as JSON.

The root cause was that the datatype returned was a datatype defined in SQL Server, which had references to other tables. If one reference on single element was null (which in other parts of the business logic was perfectly okay), the autocomplete widget somehow caused an error.

I mitigated this by returning a much simpler datastructure instead of the actual table from the database, containing a fixed number of fields that were never null.

Upvotes: 1

Related Questions