JQuery自动完成结果样式 [英] JQuery autocomplete result style

问题描述

我正在尝试从自动完成结果中更改样式。

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

我试过：

// 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.

谢谢。

使用：
jQuery-UI自动完成

编辑：我需要从我的结果中更改css，这来自我的JSON，而不是来自输入。您发布的代码仅更改输入，而不是结果。这就是为什么我要求结果列表使用的类（至少，我相信这是一个列表）。我试图从ff使用fb而无法找到它。再次感谢您的耐心等待。

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：我将以jQuery UI中的自动填充为例。

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

选中此项以查看jQuery-UI自动完成页面

在我从首页示例的文本框中键入Ja后，Java和JavaScript将显示为结果，位于文本框下方的小框中。

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.

这个小盒子是我想要改变CSS的。上面示例中的代码只更改了我的文本框CSS（我根本不需要）。

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.

包含结果项的UL类是我需要的。

解决方案
正如Zikes在对已接受答案的评论中所说，这是解决方案。您只需要在CSS文件中放入 ul.ui-autocomplete.ui-menu {width：300px} 。

这将使所有结果框css具有宽度：300px （如示例）。

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

我忘记了页面加载时结果对象不存在，因此无法通过调用 $（'...'）找到并锁定该对象.css（）。您实际上需要在CSS文件中放置 ul.ui-autocomplete.ui-menu {width：300px} ，以便在生成结果时生效并插入页面。

- Zikes

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

推荐答案

可以在此处找到自动完成小部件的样式： http://docs.jquery.com/UI/Autocomplete#主题

Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming

小提琴

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;
}

这篇关于JQuery自动完成结果样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！