Jquery 自动补全建议 - 小字体列表答案

【问题标题】：Jquery autocomplete suggestions - small font listJquery 自动补全建议 - 小字体列表
【发布时间】：2013-11-06 23:10:51
【问题描述】：

Jquery 自动补全建议列表字体很大，我想像输入文本框字体一样小。如何限制建议列表中的小字体？请看下面的屏幕和代码：

<!DOCTYPE>
<html>
<head>
<title>Auto Complete in JSP Java</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<STYLE TYPE="text/css" media="all">
.ui-autocomplete {
    position: absolute;
    cursor: default;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;}
</STYLE>
<script>
$(function() {
$("#names").autocomplete({
    source: function(request, response) {
    $.ajax({
    url: "searchName.jsp",
    type: "POST",
    dataType: "json",
    data: { name: request.term},
    success: function( data, textStatus, jqXHR) {
                    var items = data;
                    response(items);
                },
    error: function (error) {
       alert('error: ' + error);
    }
    });
    },
    minLength: 3
    });
});
</script>
</head>

<body>
<input type="text" name="name" id="names" /> 
</body>
</html>

【问题讨论】：

标签： javascript jquery css jquery-ui-autocomplete

【解决方案1】：

定义在：

.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 10px;
}

但你可以在它之前添加一些东西，例如

.ui-autocomplete.ui-widget {
  font-family: Verdana,Arial,sans-serif;
  font-size: 10px;
}

【讨论】：

【解决方案2】：

例如：

$('.ui-autocomplete-input').css('fontSize', '10px');

有关自动完成小部件样式的信息可在此处找到：

Theming autocomplete jQuery

ui-autocomplete-input 后面的 ul 标记是它生成的结果。通过定位ul.ui-autocomplete.ui-menu，你应该得到你需要的东西。

【讨论】：