Jquery autocomplete style

Tout en style jQuery autocomplete plugin, j'ai le code HTML connecté en filaire à ma page:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

Comment puis-je désactiver style d'être faite par le biais de HTML et de le garder fait via CSS? Je ne pense pas que mes fichiers CSS sont d'écraser que de style.

Toute aide sera de faire

le plugin besoins probables de ces styles, et de les adapter pour répondre le comportement du plugin.
Je veux séparer de mon résultat <ul> affichage de la liste de ma zone de recherche...une idée de comment cela peut être fait?
Pouvez-vous élaborer un peu plus sur le affichage de ma zone de recherche?
La liste de résultats est généralement ajoutée au bas de ma zone de texte de recherche...je veux qu'il y ait un écart de 5 px, juste entre la zone de texte de recherche et la boîte contenant la liste des résultats

OriginalL'auteur mabounassif | 2011-02-16

  1. 9

    jQuery autocomplete besoins pour définir certains styles en ligne à la position de la liste déroulante sous la zone de texte et la taille aussi.

    Il n'a pas de régler quoi que ce soit d'autre, de sorte qu'il est complètement à vous de fournir le style visuel de par la définition des styles de ces catégories qui y sont ajoutés (ie. ui-autocomplete).

    Conseils

    Ce que j'essaie de vous dire est ceci: définir l'aspect visuel de la liste déroulante qui s'affiche et ne vous inquiétez pas sur le positionnement et le dimensionnement des styles en ligne.

    Besoin de changer de positionnement

    Si vous avez besoin de remplacer le positionnement et le dimensionnement de cet élément, vous pouvez toujours définir vos styles que !important.

    ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

    Édition supplémentaire

    Réglage margin-top ne fait rien car il calcule position à chaque fois qu'il affiche le menu déroulant. Mais vous pouvez essayer de régler ce:

    .ui-autocomplete
{
    border-top:5px solid transparent!important;
}

    Ce réellement fait le tour.

    Je veux séparer de mon résultat <ul> affichage de la liste de ma zone de recherche...une idée de comment cela peut être fait? Je veux juste 5 gratuit px entre
    Avez-vous essayé de réglage margin-top: 5px; de mettre un peu d'espace entre votre zone de recherche et la liste?
    oui j'ai toujours le même code HTML de style
    Vous avez raison. Il calcule la position à chaque fois qu'il affiche la liste déroulante, de sorte qu'il s'ajuste par la valeur de la marge.
    Vérifier mon édition supplémentaire

    OriginalL'auteur Robert Koritnik

  2. 7

    Cela peut être fait par la mise en œuvre de certains changements dans la méthode "open" de la saisie semi-automatique.

    considérons cet exemple: 

    $('#search_text_box').autocomplete({
        source: "<?= $this->baseUrl('items/autocomplete');?>",
        minLength: 2,
        search: function(){
            //$ulForResults.empty();
        },
        'open': function(e, ui) {
            $('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
            $('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
            $('.ui-autocomplete').append("<div id='autofill_results'><span>2,000</span> results found, showing <span>10</span></div>");
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
    };

    De cette façon, en changeant la façon dont et où votre saisie semi-automatique s'affiche. Le " ul " qui montre la saisie semi-automatique info a de la classe ui-saisie semi-automatique vous pouvez manipuler son css dans cette fonction pour afficher le menu déroulant de la manière que vous voulez.

    OriginalL'auteur ShayanK