CODEWITHSUNDEEP
cssjsonjquery-uic#-4.0asp.net-mvc-4
Cedric Nuyts
Cedric Nuyts

Reputation: 57

Textbox with autocomplete doesn't show layout in MVC 4

I have made a textbox with an autocomplete in ASP.NET MVC 4, Javascript and JSON. I want to give the autocomplete a nice layout, but it won't work. There is a css-file jquery.ui-autocomplete.css automatically in the project.

This is the place where I fill the list

<li data-role="list-divider">Gemeente</li>
        <li data-role="fieldcontain">
            <div class="ui-widget">
                <input type="text" name="Gemeente" class="ui-autocomplete"/>
            </div>
        </li>

This is the script I use:

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.ui-autocomplete').autocomplete({
            source: '@Url.Action("AutocompleteGemeenten")'
            });
</script>

This is the JSON-code I use:

public ActionResult AutocompleteGemeenten(string term)
        {
            List<string> items = new List<string>();

            items = _zoekClient.GetGemeenten();

            List<string> filteredItems = new List<string>();

            filteredItems = items.Where(test => test != null && test.ToLower().Contains(term.ToLower())).ToList();

            return Json(filteredItems, JsonRequestBehavior.AllowGet);
        }

this is the css-file

.ui-autocomplete { position: absolute; cursor: default; }   
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

Can anyone help me changing the layout of the autocomplete?

thanks in advance

Upvotes: 2

Views: 1883

Answers (1)

cecilphillip
cecilphillip

Reputation: 11596

If you want to change the default styling of jQuery UI you have a few options.

1. Override the default css

CSS is evaluated in order of last declaration, which means the last defined rule wins. You add rules that override the styles defined in the jQuery UI style sheet. Add your rules in another CSS file and place a link to that file after the link to the jQuery UI CSS file

<link href="~/Content/jquery.css" rel="stylesheet" type="text/css" />
<link href="~/Content/overrides.css" rel="stylesheet" type="text/css" />

2. Add classes to your generated jQuery widget

jQuery has a method called addClass. You can define a CSS class with your style rules and then add that class to to jQuery widget

Define:

.myClass {      
  display:block;
  float: left;
}

Add:

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $('.ui-autocomplete').addClass('myClass');
    $('.ui-autocomplete').autocomplete({
        source: '@Url.Action("AutocompleteGemeenten")'
    });
});

Upvotes: 1

Related Questions