Question

I use jquery autocomplete in my application but I am not satisfied on how I handle click on autocomplete items:

$(function () {
        $("input#autocomplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("Search", "Navigation")', type: "POST", dataType: "json",
                    data: { searchTerm: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Name,
                                value: item.CityId
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {                
                window.location.href = '@Url.Action("Index", "Home")' + '/' + ui.item.value;
            }
        });
    });

This works but from time to time this doesn’t work.
Is there any way to add @Html.ActionLink... as item?

Answer 1

Try this

function onItemSelect(item){
   var siteRootUrl = '@Url.Content("~/")';
   window.location.href = siteRootUrl + 'controller/action/' + item;
}

$(function () {
        $("input#autocomplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("Search", "Navigation")', type: "POST", dataType: "json",
                    data: { searchTerm: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Name,
                                value: item.CityId
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {                
                onItemSelect(ui.item.value);
            }
        });
 });