CODEWITHSUNDEEP
c#jqueryasp.net-mvc-3
Vinicius Ottoni
Vinicius Ottoni

Reputation: 4677

Jquery Autocomplete + ASP.NET MVC 3 not displaying the results

My View Code:

Script and Css:

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

Input text:

@Html.TextBoxFor(model => model.Filter.HouseName, new { style = "width: 205px", onKeyUp = "updateHouseNames()" })

Javascript:

function updateHouseNames() {
    var houseArray = new Array();

    $.post('@Url.Action("LoadHouses")', { houseName: $("#Filter_HouseName").val() }, function(houses) {
        houseArray = houses;
    });

    $("#Filter_HouseName").autocomplete({
        source: houseArray 
    });
}

Controller method:

[HttpPost]
public JsonResult LoadHouses(string houseName)
{
    var houses = this.HouseService.SelectByName(houseName).Select(e => new String(e.Name.ToCharArray())).ToArray();

    return Json(houses);
}

I debug the javascript and the houses are selected.. but the results are not displayed in autocomplete. Why?

Upvotes: 0

Views: 818

Answers (1)

Dismissile
Dismissile

Reputation: 33071

I don't really think you should be doing it this way. If you need to customize the logic then use a callback on the autocomplete method:

$(function () {
    $('#Filter_HouseName').autocomplete({
        minLength: 1,
        source: function (request, response) {
            var term = request.term;
            var houseArray = new Array();

            $.post('@Url.Action("LoadHouses")', { houseName: term }, function(houses) {
                houseArray = houses;
                response(houseArray);
            });                
        }
    });
});

Upvotes: 1

Related Questions