将jquery.sumoselect与JSF一起使用

Question

我想将jquery.sumoselect与JSF一起使用。但是我无法做到。我正在尝试以下方法：

<h:outputStylesheet library="jquery.sumoselect" name="css/sumoselect.css" />
<h:outputScript library="jquery.sumoselect" name="js/jquery.sumoselect.js" />
<script>
  $('.sumoselect').SumoSelect();
</script>
...

<h:form>
  ...
  <h:selectManyListbox id="language" value="#{viewController.languageList}" styleClass="sumoselect">
    <f:selectItems value="#{applicationStartupController.languageList}" var="language" itemValue="#{language.code}" itemLabel="#{language.description}" />
  </h:selectManyListbox>
  ...
</h:form>

但是我得到的是以下图片：

而不是类似于：

知道发生了什么？我确信css和js文件正在正确充电。

Answer 1

一切似乎都没问题，除非您在文档准备就绪后应该运行SumoSelect()：

<h:head>
    <title>Sumo</title>
    <h:outputStylesheet library="css" name="sumoselect.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <h:outputScript library="js" name="jquery.sumoselect.min.js"/>
</h:head>

<h:body>

    <h:selectManyListbox styleClass="test">
        <f:selectItem itemValue="1" itemLabel="Item 1" />
        <f:selectItem itemValue="2" itemLabel="Item 2" />   
        <f:selectItem itemValue="3" itemLabel="Item 3" />   
    </h:selectManyListbox>

    <script>
        $(document).ready(function(){
            $('.test').SumoSelect({okCancelInMulti:true, selectAll:true });
        });
    </script>
</h:body>