Question

我正在使用Jquery自动完成输入框替换大型下拉列表（由于浏览器呈现而产生性能影响）。我可以使用自动完成功能，但是所选的值在java bean类中不可用。这是我的代码

<script>

var productionSourceListString =      document.getElementById("hiddenField").value;
var productionSourceListArray = productionSourceListString.split(',');
$(document).ready(function(){
$("#centerForm\\:production_source").autocomplete({ source :  productionSourceListArray, minLength: 3 });   
$( "#centerForm\\:production_source" ).on( "autocompletechange", function()  {$( "#centerForm\\:production_source" ).attr("value",this.value);} );

});
</script>
<h:inputText  id="production_source" style="width:80px; overflow:hidden"   value="#{recurringSplitBean.item.productionSource.description}">
</h:inputText>

<input type="hidden" id="hiddenField" value="#{productionSourceBean.productionSourceList}"/>

生产源Spring Bean类（获取下拉列表中的元素列表并将它们存储在全局声明的逗号分隔字符串中，Jquery在第一个代码片段中访问该字符串）

private String productionSourceList = ""; (GLOBAL)

public void getProductionSourceListAjax(AjaxBehaviorEvent event){

    List<String> localList = new ArrayList<String>();
    Iterator<ProductionSource> iterator = this.getLovItems().iterator();

    while(iterator.hasNext())
    {
        localList.add(iterator.next().getDescription());
    }

    productionSourceList = StringUtils.collectionToCommaDelimitedString(localList);     
}

当我尝试访问RecurringSplitBean类中的值

时

if(AppSupport.isEmpty(item.getProductionSource()) || AppSupport.isEmpty(item.getProductionSource().getProductionSourceId())){           
        JsfMessage.addError("production_source","error.value.required");
        return null;
    }

item.getProductionSource（）。getDescription（）为null。但是，如果我在输入框中键入值，则可以在recurringsplitbean类中使用该值，而不是从Jquery下拉列表提供的列表中选择值。有什么想法吗？：）

Answer 1

所以我终于自己弄明白了。我发布这个答案，希望能帮助其他人。

<script>

var productionSourceListString = document.getElementById("hiddenField").value;
var productionSourceListArray = productionSourceListString.split(',\"*\",');
var b = JSON.parse(productionSourceListArray);
var data={"users" :b};


var finalData =$.map(data.users, function(item) {

              return {

                   label:item.label,
                   value:item.value,
                   id: item.id
            }

           });


</script>

<h1>
    <h:outputText value="#{msg['recurring_split']}" styleClass="home_message" />
</h1>

<fieldset>

    <legend>Recurring Split</legend>

    <h:panelGrid columns="4" cellpadding="2" style="width:500px;">

        <h:outputLabel for="production_source" value="#{msg['production_source']}">
            <h:outputText value="#{msg['edit_alert']}" escape="false" />
        </h:outputLabel>    
        <h:inputText   id="production_source" style="width:80px; overflow:hidden" value="#{recurringSplitBean.item.productionSource.productionSourceCode}">

        </h:inputText>

        <h:inputText  id="production_source_description" style="width:180px ;background-color: #E5E5E5;" value="#{recurringSplitBean.item.productionSource.description}">

        </h:inputText>

简而言之，该值未在bean中可用的原因是因为自动完成功能未触发ajax调用。因为我找不到从自动完成脚本触发的直接方法。我创建了以下隐藏按钮，其中包含我希望在bean中可用的空格分隔ID元素列表： -

<h:commandButton id="renderProductionSource" value="renderProductionSource" style="display:none">
        <f:ajax execute="production_source production_source_description production_source_id"></f:ajax>
        </h:commandButton>

在autcomplete函数中，我执行hiddenButton.click（）函数

$(document).ready(function(){
$("#centerForm\\:production_source").autocomplete({ source : finalData, minLength: 3,  select: function(event, ui) {
      event.preventDefault();
      var label = ui.item.label;
      var value=ui.item.value;
      var id = ui.item.id;
      $( "#centerForm\\:production_source" ).attr("value",label);
      $( "#centerForm\\:production_source_description" ).attr("value",value);
      $( "#centerForm\\:production_source_id" ).attr("value",id);
      $("#centerForm\\:renderProductionSource").click();
     } });   
});

JQuery自动完成功能 - 选择的值在spring bean类中不可用

1 个答案: