Question

我已经使用JSF开发了jQuery自动完成功能，并且工作正常，但是当我添加h:form时，它无效。

这是我的代码。

<script>        
    /* auto complete */
    $(function() {
        var availableTags = "#{instrumentBean.instrumentList}";     
        $("#tags").autocomplete({
            source: availableTags
        });
    });
</script>

<div class="ui-widget">
    <h:form>                            <!-- this form was missing -->
        <label for="tags">Symbol: </label>

        <h:inputText id="tags" />
        <h:form id="watchListForm">
        <h:commandButton action="#{watchListBean.addtowatchList}" 
                         value="ADD TO WATCH LIST"/>
    </h:form> 
</div>

使用上面的代码，自动填充工作正常，但是当我将h:inputbox置于h:form内时，它无效。没有把它放在h:form中我无法将它的值提交给JSF支持bean。请告诉我有价值的想法，以确保这一点。

提前致谢

Answer 1

我不确定这是什么原因，但是我使用JSF，并且通常表单内部字段的id由表单的id作为组件id的前缀。因此，您应该尝试使用（如果<h:inputText>位于<h:form>内）

$(function() {
  var availableTags = #{instrumentBean.instrumentList};    
  //the id of the component should be watchListForm:tags, you have to escape 
  //the semi-colon
  $( "#watchListForm\\:tags" ).autocomplete({
    source: availableTags
   });
});

Answer 2

JSF根据client identifier向DOM中的命名空间组件发出rules defined in the API。 form组件具有prependId属性，如果您想对此进行一些控制。

Answer 3

这里发生的是因为您未在prependId="false"标记中指定<h:form>，<h:inputText>标记的ID是自动生成的，前缀添加到ID的开头（即客户端标识符））。

您可以在<h:form>标记中使用prependId属性设置为'false'，这样可以保持用户插入ID并消除html标记中的JSF自动生成ID。您应该在prependId="false"代码

中使用<h:form>

这是你如何做到的，

 <h:form id="yourForm" prependId="false">
    <h:inputText id="textId" />
    <h:commandButton action="#{yourBean.addtoList}" value="ADD" >
    </h:commandButton>
 </h:form>

JQuery将始终搜索您在JQuery代码中指定的确切ID。这就是这个，

<script type="text/javascript">        
$(function() {
  var insTags = #{insBean.insList};       
  $("#textId").autocomplete({
     source: insTags 
  });
});
</script>

Answer 4

您可以使用像jQuery(".className").autocomplete();

这样的虚拟css类名，而不是将id与jQuery一起使用

因此，您必须将此类应用于自动完成的div，如：

<div class="className"> ..

使用JSF进行jQuery自动完成

4 个答案: