jQuery 자동 완성 제안 - 작은 글꼴 목록

StackOverflow https://stackoverflow.com/questions/19824820

문제

jQuery autocomplete 제안 목록 글꼴이 매우 큽니다. 텍스트 상자 글꼴에 입력하는 것처럼 작고 싶습니다. 제안 목록에서 작은 글꼴로 제한하는 방법은 무엇입니까? 아래 화면 및 코드를 참조하십시오.

<!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>
도움이 되었습니까?

해결책

다음과 같이 정의됩니다.

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

그러나 당신은 그것에 대해 예를 들어 앞에있을 수 있습니다

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

다른 팁

예를 들어 : 

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

자동 완성 위젯 스타일에 대한 정보는 다음을 참조하십시오.

자동 완성 jQuery 테마

그만큼 ul 다음에 마크 업 ui-autocomplete-input 그것이 생성 한 결과입니다. 타겟팅으로 ul.ui-autocomplete.ui-menu 필요한 것을 얻어야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top