XPages typeahead:你喜欢谷歌吗

XPages typeahead:你喜欢谷歌吗,xpages,xpages-ssjs,Xpages,Xpages Ssjs,更新 这就是我的xpage中的内容: <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:panel id="ContainerPanel"> <xp:inputText id="typeAhead"> <xp:eventHandler event="onchange" s

更新

这就是我的xpage中的内容:

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:panel id="ContainerPanel">
    <xp:inputText id="typeAhead">
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="norefresh">
            <xp:this.action><![CDATA[#{javascript://code here to trap the click in the list of values
//displayed by the type ahead.  Code redirects to another page

//the goal here would be to avoid the full/partial update and only use the CSJS
//code to trigger the button's partial/full refresh so we can avoid having the onchange code
//trigger a refresh when the user decides to click the button instead of clicking on a suggestion 
//that is offered by the typeahead

//I thought of using the temporary field and use it to store the value selected in the type ahead list,
//so the code knows wheter we are running the CSJS from the type ahead list or from the button (the onchange
//of the type ahead will fill this field so we know wether to trigger the CSJS partial refresh }]]></xp:this.action>
            <xp:this.script><![CDATA[var selectedValue = document.getElementById("#{id:typeAhead}").value;
var targetField = document.getElementById("#{id:temporaryField}");
alert("typeAhead CSJS onchange: " + selectedValue);
targetField.value = selectedValue;
//init the partial refresh here!!!]]></xp:this.script>
        </xp:eventHandler>
        <xp:typeAhead mode="partial" minChars="2">
            <xp:this.valueList><![CDATA[aaaa
bbbb
cccc
dddd]]></xp:this.valueList>
        </xp:typeAhead></xp:inputText>
    &#160;
    <xp:button value="GO" id="button1">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript://same call to the code called in the onchange event of the typeahead field
mySSJSFunction();}]]></xp:this.action>
        </xp:eventHandler></xp:button>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:inputText id="temporaryField"></xp:inputText>
    </xp:panel>
</xp:view>

我正在尝试使用一个临时字段来存储在前面的类型中选择的值,这样我就可以确定是否需要立即运行SSJS函数(用户在列表中选择了一个值),或者不做任何事情,因为用户只想去点击按钮

不幸的是,代码在办公室,我现在在家,但是上面代码中的注释应该能让我了解我想要实现的目标

也不确定是否应该使用XSP._partialRefresh()、XSP.PartialRefreshGet()以及应该使用哪个控件ID(如果它有任何重要性)

希望一切都有意义。。。只是想让用户能够在提前键入列表中选择一个值,或者在字段中键入一些内容并单击搜索按钮,这两种情况都调用相同的SSJS函数(使用提前键入列表中选择的值或在字段中键入的内容)


第一个职位

我有一个带有字段和按钮的页面,就像谷歌页面一样。我已经设置了提前输入,所以它会返回与输入的“搜索”术语相对应的文档标题列表。因为我希望应用程序在用户单击提前输入列表中的项目时加载页面,所以我向提前输入字段的onChange事件添加了一些代码。那很好,但是

假设用户希望继续并单击按钮,因为“提前键入”字段显示的列表仅显示前10个搜索结果,而他要查找的文档不在该列表中,因此他希望通过单击搜索按钮触发“完全搜索”。发生的情况是,字段的onchange代码在按钮的onclick代码之前被触发,并且由于在type ahead字段上进行完全刷新,这会触发页面刷新,用户需要再次单击按钮以实际打开搜索页面

问题是quit esimple:我如何获得与Google页面相同的行为,如果我点击其中一个建议,就打开该页面,但在点击按钮时也会打开搜索页面/搜索结果页面

以下是迄今为止的代码:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xp_1="http://www.ibm.com/xsp/coreex" dojoParseOnLoad="true">


    <xp:this.resources>
        <xp:script src="/xpSortedSearches.jss" clientSide="false"></xp:script>
        <xp:script src="/xpadSearch.jss" clientSide="false"></xp:script>
        <xp:dojoModulePath loaded="true"
            url="/xsp/.ibmxspres/dojoroot/dojo/dojo.js">
        </xp:dojoModulePath>



    </xp:this.resources>
    <xp:panel id="PanelSearch" style="text-align:right;">

        <xp:inputText id="inputSearch"
            style="width:225px;height:20px;font-size:10pt;font-family:sans-serif;padding-left:5.0px;padding-top:5.0px;padding-bottom:2.0px; border:1px solid gray;"
            tabindex="0" disableClientSideValidation="false"
            disableModifiedFlag="true">
            <xp:this.attrs>
                <xp:attr name="placeholder">
                    <xp:this.value><![CDATA[#{javascript:if(sessionScope.lang=="fr") {
    "Entrez votre recherche ici ...";
} else {
    "Enter your search query here...";
}}]]></xp:this.value>
                </xp:attr>
            </xp:this.attrs>


            <xp:typeAhead mode="full" minChars="3" valueMarkup="true"
                var="searchQuery" ignoreCase="true">
                <xp:this.valueList><![CDATA[#{javascript://TODO Memory management???
getTypeAheadValuesFromSearchBar(getComponent("inputSearch").getValue());}]]></xp:this.valueList>
            </xp:typeAhead>





            <xp:eventHandler event="onchange" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:var key:String = getComponent("inputSearch").getValue();
if(!!key) {
    getDocFromSubject(key);
}
}]]></xp:this.action>
                <xp:this.script><![CDATA[showStandBy();
return true;]]></xp:this.script>
            </xp:eventHandler>
            <xp:eventHandler event="onkeypress" submit="true"
                refreshMode="complete">
                <xp:this.script><![CDATA[//if we have a enter, launch the search
if (thisEvent.keyCode==13) {
      var qryField = document.getElementById("#{id:inputSearch}");
      if(doSearch(qryField)) {
          showStandBy();
          return true;
      } else {
          return false;
      }
}else{
      return false;
}]]></xp:this.script>
                <xp:this.action><![CDATA[#{javascript:launchSearch();}]]></xp:this.action>
            </xp:eventHandler>

        </xp:inputText>

        <xp:button id="button1" icon="/search.png"
            styleClass="searchButtonSmall">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.onStart>
                    StandbyDialog_Started();
                </xp:this.onStart>
                <xp:this.action><![CDATA[#{javascript:launchSearch()}]]>
                </xp:this.action>

                <xp:this.script><![CDATA[  var qryField = document.getElementById("#{id:inputSearch}");
  if(doSearch(qryField)) {
      showStandBy();
      return true;
  } else {
      return false;
  }]]></xp:this.script>
            </xp:eventHandler>
        </xp:button>
        <xp:br />
        </xp:panel>

    <!--
        This event handler makes sure the search box has the focus once the
        page is loaded

        <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.onStart>
        StandbyDialog_Started();
        </xp:this.onStart>
        <xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputSearch}");
        if (edit) {
        edit.focus();
        }]]>
        </xp:this.script>
        </xp:eventHandler>
    -->


    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputSearch}");
if (edit) {
    edit.focus();
}]]></xp:this.script>
    </xp:eventHandler></xp:view>

待机对话框_已启动();