2

我在 ASP.NET MVC 4、Javascript 和 JSON 中制作了一个带有自动完成功能的文本框。我想给自动完成一个不错的布局，但它不起作用。项目中自动有一个css文件jquery.ui-autocomplete.css。

这是我填写清单的地方

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

这是我使用的脚本：

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

这是我使用的 JSON 代码：

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);
        }

这是css文件

.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;
}

谁能帮我更改自动完成的布局？

提前致谢

4

1 回答 1

1

如果你想改变 jQuery UI 的默认样式，你有几个选择。

1.覆盖默认css

CSS 按最后声明的顺序进行评估，这意味着最后定义的规则获胜。您添加的规则覆盖 jQuery UI 样式表中定义的样式。在另一个 CSS 文件中添加您的规则，并在指向 jQuery UI CSS 文件的链接之后放置一个指向该文件的链接

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

2. 向生成的 jQuery 小部件添加类

jQuery 有一个名为addClass的方法。您可以使用您的样式规则定义一个 CSS 类，然后将该类添加到 jQuery 小部件

定义：

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

添加：

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

于 2012-05-08T15:09:33.043 回答