Specialized type-ahead | 易学教程

问题

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?

回答1:

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.)

Here is a simple example:

<?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.

回答2:

Roy - another options would be to roll your own typeAhead and not use the out of the box version

http://xomino.com/2012/05/01/jquery-in-xpages-8-tokeninput-autocomplete/

Using the Token Autocomplete you can control the search input and the display output - in this way you can display the whole 80000123 string and the 123 would be highlighted as the text that the user has input.

回答3:

Possibly a partial answer - but I stumbled across a blog post by Rasmus Bauck a while back that explained a technique for handling the type-ahead calls with code of your own.

I didn't get around to trying it, but I saw your question and it jogged my memory.

http://devxpages.blogspot.com.au/2010/04/extending-xpages-type-ahead.html

Hope it helps,

Brendan

来源：https://stackoverflow.com/questions/11286096/specialized-type-ahead

标签

xpages