Question

我有一个附加到输入的名称选择器，但也希望在附加到名称选择器的第二个字段中允许预先输入，然后将预先输入控件中的选定条目添加到dojo名称文本框控件。

在typeahead onchange事件中，我可以获取它的值，我可以在Name Text Box控件中获取值，但NameTextBox中的每个条目都是这样的跨区链接：

<SPAN tabIndex=0 val="**abbreviatedNotesName**"><A class=lotusFilter tabIndex=-1 href="javascript:;">**commonNotesName**<SPAN class=lotusClose>x</SPAN></A></SPAN>

我是否需要重新编写NameTextBox的innerHTML，并从typeahead结果中猜出commonname？或者，还有更好的方法？感谢您的任何帮助/建议。

以下是代码：

<div id="copyToRow">
    <div class="namePickerContainer">
        <xe:namePicker id="namePicker1" for="fld_copyto_recipients">

            <xe:this.dataProvider>
                <xe:namePickerAggregator>
                    <xe:this.dataProviders>
                        <xe:dominoNABNamePicker addressBookSel="all"
                            nameList="peopleAndGroups">
                        </xe:dominoNABNamePicker>
                        <xe:dominoViewNamePicker labelColumn="$1"
                            viewName="($VIMPeople)" databaseName="#{javascript:viewScope.personalNAB;}"
                            label="#{javascript:viewScope.personalNABTitle;}">
                        </xe:dominoViewNamePicker>
                    </xe:this.dataProviders>
                </xe:namePickerAggregator>
            </xe:this.dataProvider>
        </xe:namePicker>
<xp:div id="copyToContainer" styleClass="addresseeContainer">
    <xe:djextNameTextBox id="fld_copyto_recipients"
        value="#{sendFilesDoc.file_CopyToRecipients}" multipleSeparator=","
        style="min-height:1.5em;" multipleTrim="true">
    </xe:djextNameTextBox>
    <xp:inputTextarea id="copyto_typeahead">
        <xp:typeAhead mode="partial" minChars="1"
            preventFiltering="true">
            <xp:this.valueList><![CDATA[#{javascript:getComponent("namePicker1").getTypeAheadValue(this)}]]></xp:this.valueList>
        </xp:typeAhead>

        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="copyToRow">
            <xp:this.script><![CDATA[var copyTo = XSP.getElementById("#{id:copyto_typeahead}");
var result = XSP.getElementById("#{id:copyToTA}");
var newEntry = '<SPAN tabIndex=0 val="' + copyTo.value + '"><A class=lotusFilter tabIndex=-1 href="javascript:;">' + copyTo.value + '<SPAN class=lotusClose>x</SPAN></A></SPAN>';
//Format: <SPAN tabIndex=0 val="<abbreviated NotesName>"><A class=lotusFilter tabIndex=-1 href="javascript:;">common NotesName<SPAN class=lotusClose>x</SPAN></A></SPAN>

result.value = copyTo.value;
var copyToRecipients = XSP.getElementById("#{id:fld_copyto_recipients}");
//<INPUT style="MIN-HEIGHT: 1.5em" id=view:_id1:include1:fld_copyto_recipients type=text name=view:_id1:include1:fld_copyto_recipients dojoType="extlib.dijit.NameTextBox">
var copyToValue = copyToRecipients.innerHTML;
alert('copytorecipients innerHTML = ' + copyToValue);
alert('copytorecipients value = ' + document.getElementById("#{id:fld_copyto_recipients}").value);  <-- undefined

var copyToArray = new Array();
var a = document.getElementsByName("#{id:fld_copyto_recipients}");
copyToArray = (a[0].value.split(','));

copyToArray.push(result.value);
//copyToRecipients.value = copyToArray.join(',');   <-- this does not work
alert('copyToArray value = ' + copyToArray.join(','));
result.value = copyToArray.join(',');

copyTo.value = "";
return;]]></xp:this.script>
        </xp:eventHandler>
    </xp:inputTextarea>
</xp:div>

<xp:inputText id="copyToTA">

</xp:inputText>
</div></div>

Answer 1

我认为绊倒我需要在NameTextBox上进行验证，似乎可以防止类型中的onchange事件被触发。谁知道？经历了很多次迭代......我最终添加Tommy Valand's JS function来控制何时触发验证＆amp;这似乎解决了问题。

将NameTextBox绑定到数据源字段。将typeahead绑定到requestScope变量。下面的typeahead onchange事件代码也会在包装2个输入的容器面板上进行部分刷新。

/* append the typeahead name to those already selected */
var curVals:java.util.Vector = sendFilesDoc.getItemValue("file_SendToRecipients");
curVals.addElement(requestScope.sendToTypeAhead);
sendFilesDoc.replaceItemValue("file_SendToRecipients",curVals);
requestScope.sendToTypeAhead = null;

然后在NameTextBox onChange事件中也部分刷新容器面板：

    /*
    remove duplicates that can be picked if the format of the displayed name in the right panel of the 
    name picker dialog doesn't match the column returned from the picker -- for instance, this will
    happen on internet-style names stored in the user's personal names.nsf
    e.g. FName LName <user@somecompany.com>
*/

    var thisField:javax.faces.component.UIInput = getComponent("fld_sendto_recipients");
    var theNames = @Unique(thisField.getValue());
    thisField.value = theNames;

所以你最终会得到类似于MSN hotmail的工作方式。只需要有一个最后的问题来尝试解决，这就是如何在使用namepicker或进行typeahead选择后让光标返回到typeahead字段。在NameTextBox的客户端onchange事件上按照此post添加了此代码，但光标只是跳转到了typeahead字段，但随后立即跳出：

    /* set focus back on the typeahead input -- the input is a child of the typeahead dojo widget */
/* matches any <input> that is a child of the .dijitInputField class of the <div> for the typeahead */
var el = dojo.query('div[widgetid*="sendto_typeahead"] .dijitInputField > input').at(-1)[0].focus();

任何帮助???或者，解决方案改进的建议??

<xe：djextnametextbox>如何以编程方式添加新条目？</xe：djextnametextbox>

1 个答案: