切换时更改 p:autoComplete 默认行为

Question

我使用的是 primefaces-7.0.jar，所以我假设我使用的是版本 7。

我有一个 p:autocomplete，它填充了用户过去使用过的“代码”。允许用户输入不在列表中的其他代码，当 p:autocomplete 失去焦点时，验证代码以查看是否允许用户使用该代码。

在当前版本中，如果用户在输入框中键入内容，则使用选项卡将输入填充为列表中的“最佳”匹配项。 在以前的版本中，如果没有匹配，输入框将存储并提交用户输入的内容。

我认为在以前的版本中这是一个错误并且已经修复，但是，这是我想要的行为。

有没有办法让自动完成组件的行为与修复之前一样？

我尝试更改了几个属性，但都没有成功。

我想我可能需要重写或自定义此行为，但我不知道从哪里开始。

它必须使用 javascript (jquery?) 我在哪里可以找到它在做什么？我可以覆盖它吗？怎么样？

我觉得关键在这里https://primefaces.github.io/primefaces/jsdocs/modules/jquery.html#autocomplete 但老实说我不知道​​从哪里开始。文档似乎假设了我没有的组件知识。

我想我可能必须重写 invokeItemSelectBehavior，但我真的不知道，也不知道这是否可能。

这是来自 xhtml 的代码，稍作修改

    <p:autoComplete
        disabled="#{empty currentBean.formA.serviceDate}"
        id="userCode" dropdown="true" scrollHeight="200"
        value="#{currentBean.formA.userCode}"
        completeMethod="#{currentBean.completeUserCode}"
        forceSelection="false"
        var="userCode" itemLabel="#{userCode.code}" itemValue="#{userCode}"
        converter="userCodeConverter" 
        styleClass="userCodeInput" 
        inputStyle="width: 150px"
        cache="true"
        onchange="invokeConditionally();"
        widgetVar="userCodeWidgetVar"
        >

        <p:column>
            <h:outputText value="#{userCode.code}"/>
        </p:column>

        <p:column>
            <h:outputText value="#{userCode.description}" />
        </p:column>                                
        
        <p:ajax event="query" process="@this" update="userCodeSectionMsg"/>


        <p:ajax event="itemSelect"   
            onstart="clearChangeEvent();" 
            update="<several things are updated here>"
            process="@this"
            listener="#{currentStepBean.calculateUserAmount}" />
        
    </p:autoComplete>

这里是 invokeConditionally 方法，也在 xhtml 中：

    var delayedChangeEvent = null;
        function invokeConditionally() {
                        
          delayedChangeEvent = setTimeout(function(){
              var _formId = $('.userCodeInput').closest("form").attr('id');
              var _source = $('.userCodeInput').attr('id');
              var _update = [$('.internationalEntryGroup').attr('id'),
                  $('.applianceEntryGroup').attr('id'),$('.drugEntryGroup').attr('id'), 
                  $('.userAmountSection').attr('id'),$('.overrideuserAmountSection').attr('id'), 
                  $('.addButtonSection').attr('id'),$('.userCodeSectionMsg').attr('id')];
         
              PrimeFaces.ajax.Request.handle({
                  formId: _formId,
                  source: _source,
                  update: _update,
                  event: 'itemSelect'
              });
             }, 500);
        }

感谢任何帮助。

谢谢

Answer 1

哈哈！我有错误的文档！ 我的文档版本中没有描述 autoHighlight。