1

Quiero poder cambiar el estilo que me da el resultado del siguiente script, funciona correctamente, pero cuando me muestra los posibles resultados(tags) abajo del input,el tamaño de letra es muy grande.

SCRIPT

$( function() {
    var availableTags = [
        "BENJAMIN BEJARANO",
        "CARLOS ANDRES GONZALEZ",
        "CLEITON SALAS",
        "DIEGO VALDES",
    ];
    $( "#RESPONSABLE" ).autocomplete({
        source: availableTags
    });
});

HTML

<td align="center"><input type="text" name="RESPONSABLE" id="RESPONSABLE" /></td>

2 respuestas 2

3

Para cambiar el tamaño de letra de los resultados que te arroja el autocomplete solo necesitas aplicar la propiedad font-size de CSS a la clase .ui-autocomplete.ui-widget que provee jQueryUI con un valor que sea de tu agrado.

Ejemplo funcional:

Puedes hacerlo de dos maneras, agregando el cambio de estilos en el CSS

$( function() {
    var availableTags = [
        "BENJAMIN BEJARANO",
        "CARLOS ANDRES GONZALEZ",
        "CLEITON SALAS",
        "DIEGO VALDES",
    ];
    $( "#RESPONSABLE" ).autocomplete({
        source: availableTags
    });
});
.ui-autocomplete.ui-widget {
  font-size: 12px;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<table>
  <tbody>
    <td align="center"><input type="text" name="RESPONSABLE" id="RESPONSABLE" /></td>
  </tbody>
</table>

O cambiando el estilo por medio de JavaScript

$( function() {
    var availableTags = [
        "BENJAMIN BEJARANO",
        "CARLOS ANDRES GONZALEZ",
        "CLEITON SALAS",
        "DIEGO VALDES",
    ];
    $( "#RESPONSABLE" ).autocomplete({
        source: availableTags
    });
    
    $(".ui-autocomplete.ui-widget").css('font-size', '10px');
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<table>
  <tbody>
    <td align="center"><input type="text" name="RESPONSABLE" id="RESPONSABLE" /></td>
  </tbody>
</table>

6
  • pero va dentro del script?
    – Anderviver
    Commented el 20 dic. 2017 a las 19:24
  • @AnderssonViveros no, va en tus estilos css! Commented el 20 dic. 2017 a las 19:24
  • Ya funciona, apenas pueda acepto tu respuesta. Oye necesito ayuda con algo fuera de este tema, se que esto no se puede hacer pero estoy urgido y se que eres muy bueno programando podrías ayudarme con esto es.stackoverflow.com/questions/125941/…
    – Anderviver
    Commented el 20 dic. 2017 a las 19:27
  • @AnderssonViveros te he editado para que estés mas claro, también puedes hacerlo con JS Commented el 20 dic. 2017 a las 19:28
  • @AnderssonViveros voy a ir a ver tu otra pregunta para ver si puedo ayudarte! Commented el 20 dic. 2017 a las 19:41
0

luego de

$( "#RESPONSABLE" ).autocomplete({
    source: availableTags
});

incorpora

$( "#RESPONSABLE" ).css('font-size','12px') //pongo 12px como tamaño, puedes poner el que desees
1
  • Esta no es la solución, jQueryUi incorpora un nuevo elemento dentro del DOM para mostrar los valores coincidentes por lo cual cambiar el tamaño de letra del input no cambiará el tamaño de letra del nuevo elemento, saludos! Commented el 20 dic. 2017 a las 19:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.