带有自动完成的Textbox没有显示MVC 4中的布局
带有自动完成的Textbox没有显示MVC 4中的布局
提问于 2012-05-08 10:38:36
我用ASP.NET MVC 4、Javascript和JSON制作了一个具有自动完成功能的文本框。我想给自动完成一个很好的布局，但它不能工作。在项目中有一个css文件jquery.ui自动完成.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;
}有人能帮我改变自动完成的布局吗？
提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-05-08 15:09:33
如果您想要更改jQuery UI的默认样式，那么您有几个选项。
1.重写默认的css
CSS按最后声明的顺序计算，这意味着最后定义的规则获胜。添加覆盖jQuery UI样式表中定义的样式的规则。将您的规则添加到另一个CSS文件中，并在指向jQuery用户界面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")'
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10496973
复制相关文章
相似问题
腾讯云开发者
