Javascript XPages typeahead如何将组合框筛选器的值发送到服务器

Javascript XPages typeahead如何将组合框筛选器的值发送到服务器,javascript,combobox,xpages,client-side,typeahead,Javascript,Combobox,Xpages,Client Side,Typeahead,我有一个具有简单搜索功能的XPage。 简单搜索包括一个组合框,表示包含要搜索的信息的项目名称,以及一个文本框输入字段,用户可以在其中输入要搜索的值 “过滤器”组合框包含“记录ID”、“请求者”、“受让人”等内容 当用户选择过滤器并键入要搜索的术语并按enter键时,将在服务器上执行搜索并正确返回结果。例如,如果用户选择“RecordID”并在“ABCD”中键入,然后单击enter键,则会返回RecordID字段中包含“ABCD”的所有结果记录。如果用户选择“请求者”并键入“Joe Smith”

我有一个具有简单搜索功能的XPage。
简单搜索包括一个组合框,表示包含要搜索的信息的项目名称,以及一个文本框输入字段,用户可以在其中输入要搜索的值

“过滤器”组合框包含“记录ID”、“请求者”、“受让人”等内容

当用户选择过滤器并键入要搜索的术语并按enter键时,将在服务器上执行搜索并正确返回结果。例如,如果用户选择“RecordID”并在“ABCD”中键入,然后单击enter键,则会返回RecordID字段中包含“ABCD”的所有结果记录。如果用户选择“请求者”并键入“Joe Smith”,则返回请求者字段中包含“Joe Smith”的所有记录。这很有效

我的问题是,当我尝试将类型提前添加到值字段时。typeahead正在工作,但只筛选组合框最后提交的值。示例:如果用户选择“RecordID”,并且上次搜索是使用“RecordID”执行的,则typeahead将在输入信息时正确过滤RecordID结果。如果用户将过滤器更改为“请求者”,并开始键入名称,则不会返回结果。如果他们按enter键并根据请求者返回结果,然后清除值字段并开始键入另一个请求者的名称,则typeahead工作正常

我很确定这个问题是因为我不知道如何在typeahead事件期间访问组合框的值。下面是我的代码(使用println语句尝试确定组合框的值)。value属性和.getValue()方法都返回以前提交的组合框值。getSubmittedValue()属性返回null

<xp:comboBox
    id="simpleSearchFilter1"
    value="#{XSPrequestSearcher.simpleSearchFilter}">
    <xp:selectItems
        value="#{XSPrequestSearcher.simpleSearchChoices}" />
</xp:comboBox>

<xp:inputText
    id="simpleSearchValue1"
    value="#{XSPrequestSearcher.simpleSearchValue}">
    <xp:typeAhead
        mode="partial"
        valueMarkup="true"
        var="searchfor"
        minChars="3">
        <xp:this.valueList><![CDATA[#{javascript:var obj = getComponent("simpleSearchFilter1");
var value = obj.value;
var gvalue = obj.getValue();
var svalue = obj.getSubmittedValue();

println("***********");
println("simpleSearchValue1.typeahead");
println("\t value: " + value);
println("\t gvalue: " + gvalue);
println("\t svalue: " + svalue);

XSPrequestSearcher.setSimpleSearchFilter(getComponent("simpleSearchFilter1").value);
XSPrequestSearcher.getTypeaheadChoicesSimple(searchfor); }]]></xp:this.valueList>
    </xp:typeAhead>
    <xp:eventHandler
        event="onchange"
        submit="true"
        refreshMode="partial"
        refreshId="#{compositeData.partialRefreshTargetID}">
        <xp:this.script>
            <xp:executeClientScript>
                <xp:this.script><![CDATA[return !isBlank("#{id:simpleSearchValue1}");]]></xp:this.script>
            </xp:executeClientScript>
        </xp:this.script>
        <xp:this.action><![CDATA[#{javascript:XSPrequestSearcher.setSimpleSearchFilter(getComponent("simpleSearchFilter1").value);}]]></xp:this.action>
    </xp:eventHandler>
</xp:inputText>

我建议您使用组合框中任何可能的项来编写预输入代码。使用SSJS或Java,您可以构建预输入示例的HashMap,但可以在多个集合中循环。它非常有效。我们在日常工作中有效地使用它

我在24号节目中做了一个简短的记录:

在那个节目中,如果你输入一个人的姓或名,我有一个可以使用的输入法。(这不是我最好的视频,但你知道这个概念)

因此,在您的示例中,您可以让您的typeahead用于:RecordID或Requestor或任何其他选择。然后,如果您确实想知道组合框中的内容,您将在提交时获得对该内容的访问权


非常好用….

我建议您让您的typeahead代码与combobox上的任何可能项目一起工作。使用SSJS或Java,您可以构建可能的typeahead示例的哈希图,但可以循环到多个集合。它非常好用。我们在日常工作中有效地使用它

我在24号节目中做了一个简短的记录:

在那个节目中,如果你输入一个人的姓或名,我有一个可以使用的输入法。(这不是我最好的视频,但你知道这个概念)

因此,在您的示例中,您可以让您的typeahead用于:RecordID或Requestor或任何其他选择。然后,如果您确实想知道组合框中的内容,您将在提交时获得对该内容的访问权


非常好用….

我建议您让您的typeahead代码与combobox上的任何可能项目一起工作。使用SSJS或Java,您可以构建可能的typeahead示例的哈希图,但可以循环到多个集合。它非常好用。我们在日常工作中有效地使用它

我在24号节目中做了一个简短的记录:

在那个节目中,如果你输入一个人的姓或名,我有一个可以使用的输入法。(这不是我最好的视频,但你知道这个概念)

因此,在您的示例中,您可以让您的typeahead用于:RecordID或Requestor或任何其他选择。然后,如果您确实想知道组合框中的内容,您将在提交时获得对该内容的访问权


非常好用….

我建议您让您的typeahead代码与combobox上的任何可能项目一起工作。使用SSJS或Java,您可以构建可能的typeahead示例的哈希图,但可以循环到多个集合。它非常好用。我们在日常工作中有效地使用它

我在24号节目中做了一个简短的记录:

在那个节目中,如果你输入一个人的姓或名,我有一个可以使用的输入法。(这不是我最好的视频,但你知道这个概念)

因此,在您的示例中,您可以让您的typeahead用于:RecordID或Requestor或任何其他选择。然后,如果您确实想知道组合框中的内容,您将在提交时获得对该内容的访问权


工作非常好……

当您更改组合框的值时,它不会将其值提交给服务器。由于typeahead中的部分刷新在您的输入组件周围本地工作,因此它对组合框的客户端值一无所知

因此有两个选项。首先,您可以通过在组合框中添加一个简单的eventHandler来提交每次更改的组合框值:

<xp:eventHandler
    event="onchange"
    submit="true"
    refreshMode="norefresh" 
    disableValidators="true">
</xp:eventHandler>
现在我们将向Ajax请求中注入一些CSJ,特别是针对typeahead请求

<xp:eventHandler
    event="onClientLoad"
    submit="false">
    <xp:this.script><![CDATA[ 
dojo.addOnLoad( function(){

/*** hijacking xhr request ***/
if( !dojo._xhr )
  dojo._xhr = dojo.xhr;

dojo.xhr = function(){
  try{
     var args = arguments[1];
     if( args['content'] ){
        var content = args['content'];
           if( content['$$ajaxmode'] ){
              if( content['$$ajaxmode'] == "typeahead" ){
                    // Paranoid check for multiple typeahead:
                  if(content['$$ajaxid'] == "#{id:simpleSearch}") {
                    var filterType=dojo.byId("#{id:simpleSearchFilter1}").value;
                    content['$$value']=filterType+":"+content['$$value'];
                  }
              }
         }
     }
  }catch(e){}
  dojo._xhr( arguments[0], arguments[1], arguments[2] );
}
});]]></xp:this.script>
</xp:eventHandler>

这里有一点需要注意。我们使用的是Ajax注入。如果我们的页面使用的是类似的注入(例如,备用对话框等),变量名,如
dojo.\u xhr
应仔细修改。

当您更改combobox的值时,它不会将其值提交给服务器。由于typeahead中的部分刷新在您的输入组件周围本地工作,因此它不知道combobox的客户端值

因此有两种选择
<xp:eventHandler
    event="onClientLoad"
    submit="false">
    <xp:this.script><![CDATA[ 
dojo.addOnLoad( function(){

/*** hijacking xhr request ***/
if( !dojo._xhr )
  dojo._xhr = dojo.xhr;

dojo.xhr = function(){
  try{
     var args = arguments[1];
     if( args['content'] ){
        var content = args['content'];
           if( content['$$ajaxmode'] ){
              if( content['$$ajaxmode'] == "typeahead" ){
                    // Paranoid check for multiple typeahead:
                  if(content['$$ajaxid'] == "#{id:simpleSearch}") {
                    var filterType=dojo.byId("#{id:simpleSearchFilter1}").value;
                    content['$$value']=filterType+":"+content['$$value'];
                  }
              }
         }
     }
  }catch(e){}
  dojo._xhr( arguments[0], arguments[1], arguments[2] );
}
});]]></xp:this.script>
</xp:eventHandler>
var searchFilter=@Left(searchfor, ":");
var searchValue=@Right(searchfor, ":");
// Use searchFilter and searchValue to generate a value list.