Stilul rezultat de completare automată JQuery

Încerc să schimb stilul din rezultatul meu de completare automată.

Am incercat:


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

Caut și nu am putut afla care este clasa folosită de rezultat, astfel încât să-i pot schimba dimensiunea fontului și poate lățimea.

Mulțumiri.

Folosind: Completare automată jQuery-UI

EDITARE: trebuie să schimb CSS din rezultatul meu, care vine din JSON, nu din intrare. Codul pe care l-ați postat modifică doar intrarea, nu rezultatul. Acesta este motivul pentru care am cerut clasa folosită de lista de rezultate (cel puțin, cred că este o listă). Am încercat să folosesc fb de la ff și nu l-am găsit. Mulțumesc din nou pentru răbdare.

EDIT2: voi folosi ca exemplu completarea automată din interfața de utilizare jQuery.

Verificați aceasta pentru a vedea pagina de completare automată a jQuery-UI

După ce tastez „Ja” în caseta de text din eșantionul de pe prima pagină, Java și JavaScript vor apărea ca Rezultate, în caseta mică de sub caseta de text.

Această casetă este ceea ce vreau să schimb CSS-ul. Codul meu din exemplul de mai sus îmi schimbă doar CSS din caseta de text (de care nu am nevoie deloc).

Nu știu dacă sunt clar acum. Sper că da, dar dacă nu, te rog să-mi spui; Voi încerca mai mult dacă va fi nevoie să-mi arăt problema.

Clasa pentru UL care va conține elementele rezultat este ceea ce am nevoie.

SOLUȚIE După cum a spus Zikes în comentariul său cu privire la răspunsul acceptat, iată soluția. Trebuie doar să puneți ul.ui-autocomplete.ui-menu{width:300px} în fișierul dvs. CSS.

Acest lucru va face ca toate casetele de rezultate css să aibă width:300px (ca exemplul).

Am uitat că obiectul rezultate nu există la încărcarea paginii și, prin urmare, nu ar fi găsit și vizat de un apel către $('...').css(). De fapt, va trebui să puneți ul.ui-autocomplete.ui-menu{width:300px} în fișierul dvs. CSS, astfel încât acesta să aibă efect atunci când rezultatele sunt generate și inserate în pagină.
– Zikes


javascript jquery autocomplete
person Michel Ayres    schedule 23.03.2011    source sursă
comment
Vă rugăm să oferiți mai multe informații sau un exemplu de sursă.   -  person Faraona    schedule 23.03.2011
comment
Bună ziua @user667776, am pus două informații de știri ca EDITARE, sper că sunt bine acum. mulțumesc pentru sfatul de a-mi spori informațiile despre întrebarea mea.   -  person Michel Ayres    schedule 23.03.2011
comment
PS: Doar ca să fie clar. răspunsul este pe COMMENTARII din răspunsul acceptat.   -  person Michel Ayres    schedule 23.01.2012

Răspunsuri (4)


arrow_upward
23
arrow_downward

Informații despre stilarea widgetului de completare automată pot fi găsite aici: http://docs.jquery.com/UI/Autocomplete#theming

Fiddle

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;
}
person Zikes    schedule 23.03.2011
comment
salut Zikes, verific acolo mai întâi. Nu îmi place să vin aici să întreb înainte de a încerca mai întâi google sau documentație. Nu am găsit nimic care să spună ce clasă este clasa rezultatului. Am încercat .ui-autocomplete-input așa cum arăt în eșantion și nu a funcționat. sunt cam pierdut aici atm. Apreciez că mă ajute forțarea =) Dacă îmi lipsește ceva acolo, vă rog să-mi spuneți. Mulțumesc din nou. - person Michel Ayres; 23.03.2011
comment
@Nymos Marcajul ul care urmează după ui-autocomplete-input este rezultatele pe care le generează. Vizând ul.ui-autocomplete.ui-menu, ar trebui să obțineți ceea ce aveți nevoie. - person Zikes; 23.03.2011
comment
@Zikes, mulțumesc pentru reluarea rapidă ^.^ dar nu funcționează. Folosesc $('.ul.ui-autocomplete.ui-menu').css('width', '300px'); și nu se întâmplă nimic, verific consola de erori ff și nu există erori acolo. - person Michel Ayres; 23.03.2011
comment
@Nymos Eliminați primul . din selector, deoarece vizează elementul ul cu clasa ui-autocomplete și ui-menu. Linia ar trebui să arate ca $('ul.ui-autocomplete.ui-menu').css('width', '300px'); - person Zikes; 23.03.2011
comment
@Zikes Mulțumesc din nou pentru că m-ai ajutat atât de repede =) Am încercat din nou, așa cum ai spus. Îmi pare foarte rău pentru greșeala mea noob de a uita punctul din ul. =P. Dar chiar și cu schimbarea nu a funcționat. $('ul.ui-autocomplete.ui-menu').css('width', '300px'); așa am încercat. Și magia nu funcționează Q.Q - person Michel Ayres; 23.03.2011
comment
@Nymos Am uitat că obiectul rezultate nu există la încărcarea paginii și, prin urmare, nu ar fi găsit și vizat de un apel către $('...').css(). De fapt, va trebui să puneți ul.ui-autocomplete.ui-menu{width:300px} în fișierul dvs. CSS, astfel încât acesta să aibă efect atunci când rezultatele sunt generate și inserate în pagină. - person Zikes; 23.03.2011
comment
@Nymos, de exemplu, am creat acest jsfiddle: jsfiddle.net/Zikes/TSC3S - person Zikes; 23.03.2011
comment

Bună, băieți, dezvolt un plugin pentru eclipse și am nevoie de niște dependențe, de ex. org.eclipse.graphiti. Când îmi export pluginul și când îmi construiesc site-ul de actualizare, totul funcționează bine, până când încerc să-mi instalez pluginul, pentru că atunci vrăjitorul de instalare spune că nu am grafiti instalat. Cum pot spune vrăjitorului meu să întrebe dacă doriți să instalați automat pluginul necesar?

Mulțumesc pentru orice ajutor și idei.

- person Michel Ayres; 23.03.2011
comment
@Nymos pentru a fi clar, vrei să spui să vizați primul articol de fiecare dată sau un anumit articol, indiferent unde apare în rezultate? - person Zikes; 23.03.2011
comment
@Nymos Dacă sunteți doar după primul articol, am creat un jsfiddle pentru a demonstra că: jsfiddle .net/Zikes/WxmST/1 - person Zikes; 23.03.2011
comment
Mulțumesc din nou pentru ajutor Zikes =) Funcționează impecabil. - person Michel Ayres; 24.03.2011

arrow_upward
16
arrow_downward

Am putut să mă ajustez adăugând acest CSS la <head> al documentului (deasupra javascriptului de completare automată).

Unele dintre următoarele pot fi mai relevante decât altele. Puteți să o faceți specific pentru intrarea de completare automată dacă modificarea acestora afectează alte elemente pe care nu doriți să le fie afectate.

<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>
person Chris M    schedule 27.05.2013
comment
+1 Vă mulțumim că ne-ați oferit ceea ce ne dorim... o definiție a tuturor claselor utilizate pentru acest control. În timp ce recurg întotdeauna la „inspectarea” articolelor din DOM pentru astfel de lucruri, opțiunile de meniu se închid de fiecare dată când încarc instrumentele de dezvoltare web!!! - oricum multumesc inca o data :) - person Dal; 14.08.2013
comment
Am secund comentariul lui @Dal. Funcționează ca un farmec! buna treaba. Dar, cum ai obținut acest CSS? Propriul stil personalizat? - person now he who must not be named.; 09.10.2013

arrow_upward
3
arrow_downward

Dacă utilizați autocompletarea oficială a jQuery ui (sunt pe 1.8.16) și doriți să definiți manual lățimea, puteți face acest lucru.

Dacă utilizați versiunea redusă (dacă nu, atunci găsiți manual prin potrivirea _resizeMenu), găsiți...

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

...și înlocuiți-l cu (adăugați this.options.width|| înainte de Math.max) ...

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

... acum puteți include o valoare a lățimii în funcția .autocomplete({width:200}) și jQuery o va onora. Dacă nu, se va calcula implicit.

person Harry B    schedule 15.09.2011

arrow_upward
2
arrow_downward

Doar ca să știți că aveți două opțiuni pentru optimizarea codului:

In loc de asta:

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

Poți sa faci asta:

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

Sau chiar mai bine ar trebui să faci asta:

$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
person The Muffin Man    schedule 23.03.2011
comment
sau var mystyle = {fontSize: '10px', width: '300px'}; $('.ui-autocomplete-input').css(mystyle); - person Mark Schultheiss; 23.03.2011
comment
Îmi pare rău Nick, cred că am dat informații greșite. acele coduri îmi schimbă intrarea, nu lista de rezultate. vreau sa schimb rezultatul. Dar mulțumesc oricum pentru filmare =) - person Michel Ayres; 23.03.2011
comment
Mulțumesc și pentru eșantion Mark, apreciez. Dar așa cum i-am spus lui Nick, asta nu este informația pe care o caut. multumesc oricum =) - person Michel Ayres; 23.03.2011
comment
Aș dori să profit de acest timp pentru a răspunde la voturi negative aleatorii. Să fii sincer, este o prostie și nu ajută pe nimeni, inclusiv egoismul tău. Explicând de ce ați votat negativ, ați putea ajuta autorul să-și îmbunătățească răspunsul sau să economisiți pe altcineva problemele de a-l încerca, deoarece nu a funcționat. - person The Muffin Man; 14.10.2014