Menu
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 putul.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
342
Option - appendTo By default its value is null. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element.
There isn't a built-in parameter for limiting max results, but you can accomplish it easily: $("#auto"). autocomplete({ source: function(request, response) { var results = $. ui.
Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })
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; } I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
