Jquery autocomplete suggestions - small font list

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

Question

Jquery Autocomplete suggestions list font is very bigger ,I want to be small like typing in text box font need. how to restrict with small fonts in suggestions list ? Please see the below screen and code:

<!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>
Was it helpful?

Solution

It is defined in:

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

But you may precede it something e.g.

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

OTHER TIPS

for example : 

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

Information on styling the Autocomplete widget can be found here:

Theming autocomplete jQuery

The ul markup following the ui-autocomplete-input is the results it generates. By targeting ul.ui-autocomplete.ui-menu you should get what you need.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top