Layout issue with autocomplete in asp .net

By : Marcin
Source: Stackoverflow.com
Question!

I am following this tutorial: pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m6-ajax&mode=live&clip=0&course=mvc4-building. When I added autocomplete functionality I had a problem with layout of my form. Before searching it looks like this http://i.stack.imgur.com/RH2WM.png. When I start typing in search form I get expected list but it does not look good: http://i.stack.imgur.com/TWbea.png. Here is my Index.cshtml

@model IEnumerable<MvcApp.Models.Car>

<p>
    @Html.ActionLink("Create New", "Create")
</p>


<form method="get" action="@Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
    <input type="search" name="searchString" data-mz-autocomplete="@Url.Action("AutoComplete")" />
    <input type="submit" name="Search By Name" value="Search" />
</form>

@Html.Partial("_Cars", Model)

This is my _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@Page.Title</title>
@RenderSection("head", required: false)
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
</head>
<body>
<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Główna","Index","Home")</li>
                    <li>@Html.ActionLink("O stronie", "About", "Home")</li>
                    <li>@Html.ActionLink("Kontakt","Contact","Home")</li>
                    <li>@Html.ActionLink("Lista samochodów","Index","Cars")</li>
                </ul>
            </div>
        </div>


    </nav>
    <div class="jumbotron" id="header-jumbotron">
        <h2>ABC</h2>
    </div>
</header>
@RenderBody()

@Scripts.Render("~/bundles/mz")
@Scripts.Render("~/bundles/bootstrap")

I guess this is problem with css but I do not have any experience with it. How can I improve it? I want that list would like in that pluralsight tutorial (or google search)

By : Marcin


Answers
I don't see your target (unless I am missing something). Try this:

<div id="carsList">
    <form method="get" action="@Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
        <input type="search" name="searchString" data-mz-autocomplete="@Url.Action("AutoComplete")" />
        <input type="submit" name="Search By Name" value="Search" />
    </form>
</div>

In the jquery you could set whether to replace or append to div. You could also move the div where desired.



This video can help you solving your question :)
By: admin