link the result of autocompleted search to details page


I used autocompleted search in my product website .

It dose correct.

But I do not know how can I link the result items to products details page.

My cod:

    $(function () {
            source: function (request, response) {
                    url: $('#tags').data("url"),
                    type: "GET",
                    dataType: "json",
                    contentType: 'application/json, charset=utf-8',
                    data: {
                        search: $("#tags").val()
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Name,
                                value: item.value
                    error: function (xhr, status, error) {
            minLength: 2
<div id="search1" class="search pull-left">
                    <input id="tags" data-url="@Url.Action("AutoComplete","Home")" type="text" name="search" autocomplete="off" placeholder="search ..." value="" class="input-search form-control ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria-haspopup="true">
                    <span class="button-search fa fa-search"></span>
public JsonResult Autocomplete(string search)
            var db = new ApplicationDbContext();
            var filteredItems = db.Product.Where(item => item.Name.Contains(search) ||
            var viewModel = filteredItems.Select(x => new
                value = x.Name,
                label = x.Id

            return Json(viewModel, JsonRequestBehavior.AllowGet);

Hi Neda99,

From your code and description, I suppose your application is a MVC application. If that is the case, I suggest you use Html.BeginForm. Like this.

        @using (Html.BeginForm("ShowDetails","MyTest"))
                Title: @Html.TextBox("SearchString")
                <input type="submit" value="Filter" />

Then, you could using jquery autocompleted for the TextBox as below.

       $(function () {
                source: availableTags

If you want to add some properties for TextBox. You could refer to the following code.

        $(function () {
            $("#SearchString").attr("placeholder", "search ...");

Here is an article, you could refer to it. 

Best Regards,


but I don’t want this with submit button

yes . i use mvc5

I like the HTML output :

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 112px; left: 492px; display: block; width: 298px;">
<li class="ui-menu-item" role="menuitem"><a href="link of item1== /products/Details?id=id item1" class="ui-corner-all" tabindex="-1">item1</a></li>
<li class="ui-menu-item" role="menuitem"><a href="link of item2== /products/Details?id=id item2" class="ui-corner-all" tabindex="-1">item2</a></li>
<li class="ui-menu-item" role="menuitem"><a href="link of item3 == /products/Details?id=id item3" class="ui-corner-all" tabindex="-1">item3</a></li>

Hi Neda99,

If that is the case, Please try to use button control and use the window.location() function. Like this.

            $("#btnSubmit").click(function () {
                var tags = $("#tags").val();
                window.location("http://localhost:42162/MyTest/ShowDetails/" + tags);
<input id="btnSubmit" type="button" value="Submit" />

Best Regards,

Leave a Reply