丰富:选择下拉式跳转到列表中当前选定的项目

问题描述:

我们使用 rich:select 作为我们的下拉输入。

We are using rich:select for our drop down inputs.

<rich:select id="select" value="#{controller.attrs.value}" >
       <f:selectItems value="#{controller.attrs.items}" var="foo"
            itemValue="#{foo}" itemLabel="#{foo.bar}" />
       <f:ajax event="#{ajaxActionController.action}" render="input" />            
</rich:select>

我们的问题是,当下拉触发时,它总是从列表中的第一个元素开始。然而,我们希望它跳到当前选择的项目的位置。

Our problem is that when the drop down is triggered it always starts with the first element in the list. However we would like it to jump to the position of the currently selected item.

work:

Not possible through conventional means, but this should work:

<rich:select id="select" onlistshow="L.scrollList()" onlistclick="L.saveId()">

...

L = window.L || {};

(function() {        
    id = 0;    

    L.saveId = function() {
        id = #{ rich:component('select') }.list.index;
    };

    L.scrollList = function() {
        var list = #{ rich:component('select') }.list,
            listDiv = $( #{ rich:component('select') }.popupList.popup ).find(".rf-sel-lst-scrl"),
            selectedDivPos = $(list.items[id]).position();  

            listDiv.scrollTop(selectedDivPos.top - 7);
    };  

})(L);