Thursday, May 9, 2024
 Popular · Latest · Hot · Upcoming
94
rated 0 times [  95] [ 1]  / answers: 1 / hits: 83892  / 13 Years ago, wed, march 23, 2011, 12:00:00

I'm trying to change the style from my AutoComplete result.



I tried:




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



I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.



Thanks.



Using:
jQuery-UI AutoComplete



EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.



EDIT2: I'll use the autocomplete from jQuery UI as example.



Check this to see the jQuery-UI auto-complete page



After I type Ja in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.



This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).



I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.



The class for the UL that will contain the result items is what I need.



SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.



This will make all the the results box css have width:300px (like the sample).




I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.

– Zikes



More From » jquery

 Answers
8

Information on styling the Autocomplete widget can be found here: 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;
}

[#93112] Tuesday, March 22, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ammonderekm

Total Points: 247
Total Questions: 105
Total Answers: 98

Location: Tuvalu
Member since Sat, Feb 11, 2023
1 Year ago
;