This example uses the jQuery UI Selectize component. This autocomplete style component displays a list of results as you type and highlights the characters that match the search criteria.

An autocomplete email picker specialty component

The following code snippet is for the slider. Insert this snippet into the HTML Source area on the HTML tab of the section rule. This widget also includes specific CSS (selectize.css) and JavaScript (selectize.js) components. These are already included with the Pega 7 Platform.

<%-- Example using the SELECTIZE Jquery UI component - http://selectize.github.io/selectize.js/ --%>
<pega:choose>
<pega:when test="pxRequestor.pyPegaDesignMode= 'true'">Email Id Picker Widget</pega:when>
<pega:otherwise>
<%--Include CSS for the widget--%>
<pega:static type="style" app="webwb">
    <pega:file name="selectize.css"/>
</pega:static>
<%--Include JS for the widget--%>
<pega:static type="script" app="webwb">
    <pega:file name="selectize.js"/>
</pega:static>
<%--Necessary markup for the widget. Each widget instance goes into its own obiCanvasDiv--%>
<select id="select-to-<pega:reference name="param.pzComponentId"/>" class="contacts" placeholder="Pick some people..."></select>

<%--SPECIALITY CONTROL JS SUPPORT CODE BEGIN--%>
<%--Template - Change as necessary--%>
<!--
Notes:
1. Component Id for an instance of a speciality component can be referenced like <pega:reference name="param.pzComponentId"/>. 
   This unique id can be used to generate instance specific markup, CSS and JS. 
2.
    /**
    * To get data from Clipboard objects on loading the page    
    *
    * @param componentId unique component id to get data
    *
    * @return json object from clipboard properties
    */
    pega.u.d.specialtyComponent.getClipboardData    
3.
    /**
    * To store data back to Clipboard objects before submitting the page   
    *
    * @param componentId   unique component id to set data
    * @param json object to submit values to clipboard properties
    *
    * @return void 
    */
    pega.u.d.specialtyComponent.setClipboardData
-->
<script>
/* SpecialtyComponent requires div having id speciality_<pega:reference name="param.pzComponentId"/> in order to work properly */
if(document.getElementById("select-to-<pega:reference name="param.pzComponentId"/>")) {
        pega.u.d.registerAsHarnessElement({
        
             /* onLoad function will be run on load of the page and can be use to initialize the special control with default values from clipboard properties */
             onLoad : function() {
                var componentId  = "<pega:reference name="param.pzComponentId"/>";
                /*    Fetch data for this component from the harness container  */
                var data = pega.u.d.specialtyComponent.getClipboardData(componentId);
        
                /*    Put in code that sets this data onto the component  */
                var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
                  '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
        $('#select-to-'+componentId).selectize({
            persist: false,
            maxItems: null,
            valueField: 'email',
            labelField: 'name',
            searchField: ['name', 'email'],
            options: data.PeopleDetails,
            render: {
                item: function(item, escape) {
                    return '<div>' +
                        (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
                        (item.email ? '&lt;<span class="email">' + escape(item.email) + '</span>&gt;' : '') +
                    '</div>';
                },
                option: function(item, escape) {
                    var label = item.name || item.email;
                    var caption = item.name ? item.email : null;
                    return '<div>' +
                        '<span class="label">' + escape(label) + '</span>' +
                        (caption ? '<span class="caption" style="display:block">' + escape(caption) + '</span>' : '') +
                    '</div>';
                }
            },
            createFilter: function(input) {
                var match, regex;
                // [email protected]
                regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
                match = input.match(regex);
                if (match) return !this.options.hasOwnProperty(match[0]);
                // name <[email protected]>
                regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
                match = input.match(regex);
                if (match) return !this.options.hasOwnProperty(match[2]);
                return false;
            },
            create: function(input) {
                if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
                    return {email: input};
                }
                var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
                if (match) {
                    return {
                        email : match[2],
                        name  : $.trim(match[1])
                    };
                }
                alert('Invalid email address.');
                return false;
            }});
            },
         /* onBeforeSubmit function will be run before submission of the form and can be use to submit values to clipboard properties */
             onBeforeSubmit : function() {
                 var componentId  = "<pega:reference name="param.pzComponentId"/>";
                 /*    Put in code that fetches JSON data from the component  */
                 var data = "";
                 /*    Set the data for this component onto the harness container  */
                 pega.u.d.specialtyComponent.setClipboardData(componentId, data);
             }
        },pega.u.d.getContainerSectionElement("speciality_<pega:reference name="param.pzComponentId"/>"));
    }
        
</script>

<%--SPECIALITY CONTROL JS SUPPORT CODE END--%>
</pega:otherwise>