使用jQuery或CSS选择jQueryUI自动完成列表 [英] Using jQuery or CSS to select the jQueryUI autocomplete list
问题描述
jQueryUI自动完成会创建类似于以下的 ul 列表。如何使用jQuery或CSS选择 ul 列表？我可以做 ul.ui-autocomplete ，但是，我不想选择我的页面上的每一个类的列表，但只是一个特定的。 ID（即 ui-id-1 ）由插件生成，因此我不能使用这些。我想可能 open 事件会让我访问，但是，似乎不是这样的。 addClass（）将类添加到输入，而不是 ul
jQueryUI autocomplete creates a ul list similar to the following. How do I select the ul list using jQuery or CSS? I could do ul.ui-autocomplete, however, I don't want to select every list of this class on my page but just one specific one. The IDs (i.e. ui-id-1) are generated by the plugin, so I can't use these. I thought maybe the open event would give me access, however, doesn't appear to be the case. addClass() adds the class to the input and not the ul
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; width: 140px; top: 30px; left: 8px;">
<li class="ui-menu-item" id="ui-id-2" tabindex="-1">an apple</li>
<li class="ui-menu-item" id="ui-id-3" tabindex="-1">a peach</li>
<li class="ui-menu-item" id="ui-id-4" tabindex="-1">an orange</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#autocomplete").autocomplete({
source: ["an apple","a peach","an orange"],
minLength: 1,
open: function( event, ui ) {
console.log('open',event,ui,this);
}
}).addClass( "whatever" );
$( "#autocomplete" ).on( "autocompleteopen", function( event, ui ) {console.log('autocompleteopen',event,ui,this);} );
});
</script>
</head>
<body>
<input type="text" id="autocomplete" />
</body>
</html>
推荐答案
如果您需要特定的自动完成功能，使用 _renderItem 函数覆盖控件的默认呈现。这会将 ul 和项传递到它的事件，其中 ul 是要渲染的UL元素， item 是单个订单项。
If you need it for a specific autocomplete, you can use the _renderItem function to override the default rendering of the control. This passes in ul and item to it's event, where ul is the UL element that gets rendered, and item is the individual line item.
基本上，您的声明将变更为以下内容：
Essentially, your declaration would change to the following:
$("#autocomplete").autocomplete({
source: ["an apple","a peach","an orange"],
minLength: 1,
open: function( event, ui ) {
console.log('open',event,ui,this);
}
}).data("uiAutocomplete")._renderItem = function (ul, item) {
console.log('renderItem', item);
$(ul).addClass("whatyouneed");
var html = "<a>" + item.label + "</a>";
return $("<li></li>").data("item.autocomplete", item).append(html).appendTo(ul);
};
我已在此更新您的jsbin： http://jsbin.com/seqohugiyu/3/
I've updated your jsbin here: http://jsbin.com/seqohugiyu/3/
如您所见，如果您检查 li 元素之一，父 ul 具有分配给它的whatyouneed类。
As you can see, if you inspect one of the li elements, the parent ul has a class called "whatyouneed" assigned to it.
编辑：类似地，如果你想要获取列表中的 ul 而不经过项目，部分（它将返回 ul ），你可以操纵它无论如何你想要的。所以要操作它，你将使用： $（#autocomplete）.autocomplete（widget）.addClass（yourclass）;
Similarly, if you want to grab the ul for the list without going through the items, you can just grab the widget portion (which will return the ul) and you can manipulate it anyway you want. So to manipulate it, you would use: $( "#autocomplete" ).autocomplete( "widget" ).addClass("yourclass");
更多信息可以在这里的文档中找到： http：/ /api.jqueryui.com/autocomplete/#method-widget
More info can be found in the documentation here: http://api.jqueryui.com/autocomplete/#method-widget
这篇关于使用jQuery或CSS选择jQueryUI自动完成列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
