link the result of autocompleted search to details page

Hi

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:

<script>
    $(function () {
        $('#tags').autocomplete({
            source: function (request, response) {
                $.ajax({
                    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) {
                        alert(error);
                    }
                });
            },
            minLength: 2
        });
    });
</script>
<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>
                </div>
public JsonResult Autocomplete(string search)
       {
            var db = new ApplicationDbContext();
            var filteredItems = db.Product.Where(item => item.Name.Contains(search) ||
                                               item.Summary.Contains(search)).ToList();
            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"))
        {
            <p>
                Title: @Html.TextBox("SearchString")
                <input type="submit" value="Filter" />
            </p>
        }

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

       $(function () {
            $("#SearchString").autocomplete({
                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.

http://www.asp.net/mvc/overview/getting-started/introduction/adding-search 

Best Regards,
Dillion

thanks

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>
</ul>

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();
                //alert(tags);
                window.location("http://localhost:42162/MyTest/ShowDetails/" + tags);
            });
<input id="btnSubmit" type="button" value="Submit" />

Best Regards,
Dillion

Leave a Reply