专业提前输入 [英] Specialized type-ahead

问题描述

我正在尝试为职位编号字段提供预输入功能.字段的模式是 8 后跟尽可能多的零，使他们键入的字符串总共有 10 位数字.换句话说，8000001234 或 8001234567.在这些示例中，用户只想键入 1234 或 1234567 并让预先键入返回相应的文档.这可能吗?

I am trying to provide type-ahead functionality for a job number field. The pattern of the field is 8 followed by as many zeros as necessary to make the string they type a total of 10 digits. In other words, 8000001234 or 8001234567. In these examples, the users only want to type 1234 or 1234567 and have the type-ahead return the corresponding documents. Is this possible?

推荐答案

这可以通过使用 xp:typeAhead 中的参数 valueMarkup 来完成.在建议响应中，您将希望添加到 display:none 部分的字段中的值添加，informal 类的范围是建议列表中的部分显示.您可以使用 HTML 代码修改/设计非正式部分(例如，包括多行信息、添加图像等)

This can be done by using the parameter valueMarkup in xp:typeAhead. In the suggestion response you add the value you wish to add to the field in the display:none section, the span of class informal is the part display in the suggestion list. You can modify/design the informal section with HTML code (f.e. include multiline informations, add images, etc.)

这是一个简单的例子:

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

    <xp:inputText id="inputText1" value="#{requestScope.TypeAhead}">
        <xp:typeAhead mode="partial" minChars="1" 
            var="searchValue" valueMarkup="true">
                <xp:this.valueList>
                    <![CDATA[#{javascript:
                        var directoryTypeahead = function (searchValue:string) {

                        /*** generate your matches ***/
                        var matches = {};
                        for( var i=10;i<20;i++){
                            matches[i] = { display: "80000" + i };        
                        }

                        /*** return typeahead data ***/
                        var returnList = "<ul>";
                        for (var matchEntry in matches) {
                            var match = matches[matchEntry];
                            var matchDetails:string = [
                                "<li><div style=\"display:none;\">",
                                matchEntry,
                                "</div><span class=\"informal\"><strong>",
                                match.display,
                                "</span></li>"
                            ].join("");
                            returnList += matchDetails;
                        }
                        returnList += "</ul>";
                        return returnList;
                    }
                    directoryTypeahead(searchValue)
               }]]>
           </xp:this.valueList>
    </xp:typeAhead>
</xp:inputText>

您必须更改生成匹配之间的部分以满足您的要求.

You have to change the part between generate your matches to fit your requirements.

这篇关于专业提前输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！