0

I have a name picker attached to the input but also want to allow type-ahead in a second field attached to the name picker, and then add the selected entry in the type-ahead control to the dojo name text box control.

In the typeahead onchange event, I can get the value of it and I can get the values in the Name Text Box control, but each entry in the NameTextBox is a spanned link like this:

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

Do I need to re-write the innerHTML of the NameTextBox, and guess at the commonname from the typeahead result? Or, is there a better way? Thanks for any help/suggestions.

Here's the code:

<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>
4

1 回答 1

0

我认为让我绊倒的是需要对 NameTextBox 进行验证，这似乎可以防止 typeahead 中的 onchange 事件触发。谁知道？经历了很多迭代......我最终添加了Tommy Valand 的 JS 函数来控制何时触发验证，这似乎可以解决问题。

将 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 工作方式的内容。最后一个问题要尝试解决，那就是如何在使用名称选择器或做出预先输入选择后让光标返回预先输入字段。根据这篇文章在 NameTextBox 的客户端 onchange 事件中添加了此代码，但光标只是跳转到 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();

有什么帮助？？？或者，对解决方案改进的建议？

于 2013-02-07T17:33:59.387 回答