Question

我正在使用JQueryUI自动填充功能。

尝试修改自动完成结果，以便每个结果显示在带左浮动文本和右浮动文本的li中。使用下面的代码和CSS，我将鼠标悬停在不起作用。关于如何解决这个问题的任何想法？

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a><span class='l'>" + item.name + "</a></span><span class='r'>" +  item.symbol + ":" + item.ex_short + "</span></a>")
    .appendTo( ul );
};

.ui-menu .ui-menu-item span.l {
text-align: left;
width: 300px;
float: left;
}
.ui-menu .ui-menu-item span.r {
text-align: right;
width: 100px;
float: right;
}
.ui-menu .ui-menu-divider {
margin: 5px -2px 5px -2px;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
text-decoration: none;
padding: 2px .4em;
line-height: 1.5;
min-height: 0; /* support: IE7 */
font-weight: normal;
}

Answer 1

你的js看起来不错，所以我猜你的css选择器与你的HTML（.ui-menu，.ui-menu-item等）不匹配你能发布你的HTML，还是小提琴？

首先想到：你应该给你的<li>上课吗？

return $( "<li class='ui-menu-item'>" )

http://jsfiddle.net/pabo/9J9T2/

自定义JQuery UI自动完成结果选择

1 个答案: