CODEWITHSUNDEEP
asp.net-mvcjquery-uijquery-ui-autocomplete
Matthew Verstraete
Matthew Verstraete

Reputation: 6781

jQuery UI autocompleate not populating select list with text

I am using jQuery UI autocompleate and have it partially working. When there are no results found it displays my "No results found." message with no problems but when results are found it just displays an empty box for each option, no text at all.

enter image description here

I have debugged and there is nothing showing in the developer console and I can dig into my ASP.Net code and see valid data is getting pulled. What am I missing here?

jQuery:

$("#ProjectSearchBox").autocomplete(
{
    minLength: 3,
    source: function(request, response)
    {
        $.ajax(
        {
            cache: false,
            type: "GET",
            url: "/Timesheet/ProjectCodes?searchTearm=" + request.term,
            success: function(data)
            {
                response(data);
            },
            error: function(xhr)
            {
                alert("Error getting project list, please try again later.");
            }
        });
    }
});

HTML:

<li>
    <label for="ProjectSearchBox">Search Project:</label>
    <input type="text" id="ProjectSearchBox" name="ProjectSearchBox" list="ProjectList" />
</li>

ASP.Net code:

    var projects = db.ProjectCodes
                        .Where(project => project.Code.ToLower().Contains(searchTearm.ToLower()) || project.Description.ToLower().Contains(searchTearm.ToLower()))
                        .Select(project => new
                        {
                            projectInfo = string.Concat(project.Code, " | ", project.Description)
                        }).ToList();

    if (projects.Count == 0)
    {
        return Json(new { responseText = "No match found." }, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(projects, JsonRequestBehavior.AllowGet);
    }

Upvotes: 0

Views: 50

Answers (1)

esmoore68
esmoore68

Reputation: 1296

Instead of returning an array or strings, your controller is returning an array of objects with a string property called "projectInfo". The autocomplete function doesn't know how to parse this without further instruction. Change the select line your server code to:

.Select(project => string.Concat(project.Code, " | ", project.Description))

Upvotes: 2

Related Questions