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.

我将使用 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 在他对已接受答案的评论中所说，这是解决方案.您只需将 ul.ui-autocomplete.ui-menu{width:300px} 放入 CSS 文件中.

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.

这将使所有结果框 css 具有 width:300px(如示例).

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

我忘记了结果对象在页面加载时不存在，因此不会通过调用 $('...').css() 找到和定位.您实际上需要将 ul.ui-autocomplete.ui-menu{width:300px} 放在 CSS 文件中，以便在生成结果并将其插入页面时生效.
– 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#theming

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屋！