web-dev-qa-db-fra.com

Style de résultat de saisie semi-automatique JQuery

J'essaie de changer le style de mon résultat de saisie semi-automatique.

J'ai essayé:


// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

Je recherche et n'ai pas pu trouver quelle classe est utilisée par le résultat, afin de pouvoir changer sa taille de police et peut-être sa largeur.

Merci.

Utilisation: jQuery-UI AutoComplete

EDIT: J'ai besoin de changer le CSS de mon résultat, qui vient de mon JSON, pas de l'entrée. Le code que vous avez publié ne modifie que l'entrée, pas le résultat. C'est pourquoi j'ai demandé la classe utilisée par la liste de résultats (du moins, je pense que c'est une liste). J'ai essayé d'utiliser fb de ff et je ne l'ai pas trouvé. Merci encore de votre patience.

EDIT2: Je vais utiliser la saisie semi-automatique de jQuery UI comme exemple.

Cochez cette option pour voir la page d'auto-complétion jQuery-UI

Après avoir tapé "Ja" dans la zone de texte de l'exemple de première page, Java et JavaScript apparaîtront comme résultats, dans la petite zone sous la zone de texte.

Ceci petite boîte est ce que je veux changer le CSS de. Mon code dans l'exemple ci-dessus ne change que mon CSS de zone de texte (dont je n'ai pas besoin du tout).

Je ne sais pas si je suis clair maintenant. Je l'espère, mais sinon, faites-le moi savoir; J'essaierai plus si nécessaire pour montrer mon problème.

La classe pour l'UL qui contiendra les éléments de résultat est ce dont j'ai besoin.

[~ # ~] solution [~ # ~] Comme l'a dit Zikes dans son commentaire sur la réponse acceptée, voici la solution. Il vous suffit de mettre ul.ui-autocomplete.ui-menu{width:300px} Dans votre fichier CSS.

Cela rendra tous les résultats de la boîte css width:300px (Comme l'exemple).

J'ai oublié que l'objet de résultats n'existe pas au chargement de la page, et donc ne serait pas trouvé et ciblé par un appel à $('...').css(). Vous devrez en fait mettre ul.ui-autocomplete.ui-menu{width:300px} Dans votre fichier CSS, afin qu'il prenne effet lorsque les résultats sont générés et insérés dans la page.
- Zikes

javascriptjqueryautocomplete
18
Michel Ayres

Des informations sur le style du widget de saisie semi-automatique peuvent être trouvées ici: http://docs.jquery.com/UI/Autocomplete#theming

Violon

[~ # ~] html [~ # ~] 

<input type="text" id="auto">

jQuery 

$('#auto').autocomplete({'source':
    ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});

[~ # ~] css [~ # ~] 

ul.ui-autocomplete.ui-menu{width:400px}

/* 
    targets the first result's <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}
20
Zikes

J'ai pu ajuster en ajoutant ce CSS au <head> du document (au-dessus du javascript de saisie semi-automatique).

Certains des éléments suivants peuvent être plus pertinents que d'autres. Vous pouvez le rendre spécifique à l'entrée de saisie semi-automatique si la modification de ceux-ci affecte d'autres éléments que vous ne souhaitez pas affecter.

<style type="text/css">
 /* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
</style>
14
Chris M

Si vous utilisez la saisie semi-automatique officielle jQuery (je suis sur 1.8.16) et que vous souhaitez définir la largeur manuellement, vous pouvez le faire.

Si vous utilisez la version minifiée (sinon, recherchez-la manuellement en faisant correspondre _resizeMenu), recherchez ...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... et remplacez-le par (ajoutez this.options.width || avant Math.max) ...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... vous pouvez maintenant inclure une valeur de largeur dans la fonction .autocomplete ({width: 200}) et jQuery l'honorera. Sinon, il sera calculé par défaut.

3
Harry B

Juste pour que vous sachiez que vous avez deux options pour optimiser votre code:

Au lieu de cela:

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

Tu peux le faire:

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

Ou encore mieux, vous devriez le faire:

$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
2
The Muffin Man