Pregunta

La fuente de la lista de sugerencias de autocompletar jQuery es muy mayor, quiero ser pequeño como escribir en el cuadro de texto que necesita. ¿Cómo restringir con pequeñas fuentes en la lista de sugerencias? Consulte la pantalla y código a continuación:

<!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>
¿Fue útil?

Solución

Se define en:

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

Pero puedes precederle algo, por ejemplo,

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

Otros consejos

por ejemplo :

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

La información sobre el estilo del widget de autocompletar se puede encontrar aquí:

Teming jQuery autocompletado

los ul marcado después del ui-autocomplete-input son los resultados que genera. Por apuntar ul.ui-autocomplete.ui-menu Deberías obtener lo que necesitas.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top