Wyświetlanie podpowiedzi w formularzu search.

Witam, witam,

piszę aplikację w C#.NET MVC, utknąłem na etapie pisania formularza search. Potrzebuję by wyświetlał on po wpisaniu np. "pro", 5ciu podpowiedzi pod spodem. Aktualnie wpisując, nic się nie wyświetla, choć JSon wydaje się być poprawny. Prosiłbym o podpowiedź, gdzie zrobiłem błąd i czemu się one nie wyświetlają...

Dołączyłem JQuery do projektu, zainstalowałem itd.

Napisałem owy kod:

JavaScript (productSuggest):

$(document).ready(function () {
    var setupAutoComplete = function () {
        var $input = $(this);

        var options = {
            source: $input.attr("data-autocomplete-source"),
            select: function (event, ui) {
                $input = $(this);
                $input.val(ui.item.label);
                var $form = $input.parents("form:first");
            }
        };
        $input.autocomplete(options);
    };
    $("#seatch-filter").each(setupAutoComplete);
});

fragment widoku dzielonego _Layout.cshtml:

<div class="col-md-3">
                    <form id="seatch-form">
                        <input id="seatch-filter" type="search" name="searchQuery"
                               data-autocomplete-source="@Url.Action("ProductsSuggestions")"
                               placeholder="Szukaj..." />
                        <input type="submit" value="" />
                    </form>
</div>

oraz akcja kontrolera HomeController:

public ActionResult ProductsSuggestions(string term)
        {
var products = this.db.Product.Where(p => !p.IsHidden && p.ProductTitle.ToLower().Contains(term.ToLower()))
.Take(5).Select(p => new { label = p.ProductTitle });
return Json(products, JsonRequestBehavior.AllowGet);
        }

i wizualnie o co mi konkretnie chodzi w linku poniżej:

http://fotserv.pl/?topic=load&image=1460554945-Capture.JPG

Za wszelką pomoc bardzo dziękuję.

Zrobione. Działa. Problem był taki, że nie mogło dostać się do Akcji kontrolera HomeController. Rozwiązaniem było zrobienie nowego partialView i renderowanie go w pliku _Layout.cshtml, inaczej przejść nie chciało :)

no i brakowało jednej linijki w skrypcie
$form.submit();

Możesz jeszcze zrefaktoryzować literówkę w "seatch", żeby się na tym kiedyś nie przejechać.

Mam pewien problem dotyczący tego samego. Może ktoś podpowie.

Stworzyłem ten PartialView (SearchBox), wsadziłem tam elegancko kod tworzenia formularza, wyświetla, ale nie korzysta z skryptu JS i nie działa. Tak więc przeklejam skrypt do tego samego pliku i nic, przeklejam do _Layout.cshtml i dalej nic. Zostawiam na Index.cshtml działa, ale tylko na głównej.

Może stworzyć osobny plik skryptowski i bundle ogarnąć ?

Umieściłeś skrypt w sekcji scripts?

Tak, w pliku _Layout.cshtml

@section Scripts {
    <script>
        $(function () {
            var setupAutoComplete = function () {
                var $input = $(this);

                var options = {
                    source: $input.attr("data-autocomplete-source"),
                    select: function (event, ui) {
                        $input = $(this);
                        $input.val(ui.item.label);
                        var $form = $input.parents("form:first");
                        $form.submit();
                    }
                };
                $input.autocomplete(options);
            };
            $("#search-filter").each(setupAutoComplete);
        });
    </script>