Demo

Initial setup

Paste below HTML structure at your code where you want Suggestion box to appear. Make sure you use "a11y_input_wrapper" class to the parent DIV element. This class holds styling for suggestion box. Any custom class can be declared afterward. 

    
    
    <div class="a11y_input_wrapper">
        <label class="sr-only" for="a11y_input_box">Search by word</label>
        <input id="a11y_input_box" name="a11y_input_box" type="text" 
            class="form-control"
            autocomplete="off" aria-owns="res" aria-autocomplete="both"
            placeholder="Search by word">
    </div>

Call the autosuggestion component from Wrapper library at initial Load event. It can be $(document).ready(...) or Window.onload or Window.eventListener('load', ...). Then Suggestion box will load with default settings. Check out how to add multiple suggestion box on the page 

    
    
    var suggestionOption = {
        dataCanvas: {
            source: ['Apple', 'Mango', 'Argentina', 'Monkey', 'Bellisimo', 'Ball', 'Cat', 'Belgium']                                
        },
        minimumType: 1,
        noOfItems: 10,
        searchType: 'contains',
        SRText: {
            instruction: "When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.",
            announceCount: "%number% suggestions found. Use up and down arrows to navigate",
            suggestionBoxLabel: "List of suggestions",
            closeBtn: "Close button"
        }
    };


    window.addEventListener('load', function () {
        window.A11yWrapper('#a11y_input_box').autosuggestion(suggestionOption);
    });

    OR

    // JavaScript Users - ID name for one single slider 
    window.addEventListener('load', function () {
        window.A11yWrapper('#a11y_input_box').autosuggestion(...);
    });

    OR

    //jQuery Users
    $( document ).ready(function() {
        window.A11yWrapper('#a11y_input_box').autosuggestion(...);
    });

Configuration

All sort of customization need to be passed as an Object. Following are the available settings which can be customized

Key name Type Value
dataCanvas Object This is a data source object and it contains three keys
  • source - This is a required key and accepts
    • string - Only URL type string is allowed. If URL is passed then library will make a service call and fetch result
    • array - plain array with any sort of items or an array of objects.
  • hooks - This is an optional key and will be effective if source key holds array of objects. For an example, if developer wants to retrieve other keys from the object related to searched result, then they have to mention the key names inside an array and pass it to hooks key.
  • displayKeyName - This key becomes mandatory if source key holds array of objects. Developer needs to pass the specific key name which will be used to make the suggestion list. Please make sure this key exist on first level and not nested
Checkout the multiple data source scenarios here
minimumType Integer. No fraction allowed Determines how many characters need to be typed before showing the result. Default is 2
noOfItems Integer. No fraction allowed Determines number of items to be shown inside the suggestion list. Default is 10
searchType String Determins the search type. Available values are
  • contains - Empty string will be consider as "contains". This is a Default value.
  • start - String starts with the typed value inside input box
  • end - String ends with typed value inside input box
SRText Object This is mainly a screen reader content object and it contains three keys
  • instruction - This is String type and define instruction on about how to use the Suggestion box
  • announceCount - This is String type and defines number of available suggestions at run time
  • suggestionBoxLabel - This is String type and place before suggestion box as Label.
  • closeBtn - This is String type and screen reader content for close button.
onItemSelected Function This is a callback function and triggers when any item from the suggestion list is selected. It returns an object with key-value pair. If source key holds array of objects then return object will contain selected value and hooks value
onFocusIn Function This is a callback function and triggers when suggestion box gain focus and return current value from the input box
onFocusOut Function This is a callback function and triggers when suggestion box loose focus and return value from the input box

Different data source

  • URL string 
        
    
    var suggestionOption = {
            dataCanvas: {
                source: 'https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8',
                hooks: ['city'],
                displayKeyName: "name"
            },            
            ...
        };

    window.addEventListener('load', function () {
        window.A11yWrapper('#a11y_input_box').autosuggestion(suggestionOption);
    });

    /* Return result from console log
        Selected Item:  {name: "Harry Potter", city: "London"}
    */
  • Plain array 
        
    
    var suggestionOption = {
            dataCanvas: {
                source: ['Apple', 'Mango', 'Argentina', 'Monkey', 'Bellisimo', 'Ball', 'Cat', 'Belgium'],
            },
            minimumType: 1,
            noOfItems: 10,
            searchType: 'contains',
            SRText: {
                instruction: "When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.",
                announceCount: "%number% suggestions found. Use up and down arrows to navigate",
                suggestionBoxLabel: "List of suggestions",
                closeBtn: "Close button"
            },
            onItemSelected: function (data) {
                console.log('Selected Item: ', data);
            },
            onFocusIn: function (data) {
                console.log('Focus In event from Callback. Selected item: ', data);
            },
            onFocusOut: function (data) {
                console.log('Focus out event from Callback. Selected item: ', data);
            }
        };

    window.addEventListener('load', function () {
        window.A11yWrapper('#a11y_input_box').autosuggestion(suggestionOption);
    });
  • Array of Objects 
        
    
    var suggestionOption = {
            dataCanvas: {
                source: [
                    {
                        id: '1',
                        itemID: '10',
                        text: 'Apple',
                        desc: 'Apple is a nice fruit'
                    },
                    {
                        id: '2',
                        itemID: '20',
                        text: 'Argentina',
                        desc: 'Argentina is a country'
                    },
                    {
                        id: '3',
                        itemID: '30',
                        text: 'Ball',
                        desc: 'Ball is a object'
                    },
                    {
                        id: '4',
                        itemID: '40',
                        text: 'Batman',
                        desc: 'Batman is a character'
                    }
                ],
                hooks: ['itemID', 'desc'],
                displayKeyName: "text"
            },            
            ...
        };

    window.addEventListener('load', function () {
        window.A11yWrapper('#a11y_input_box').autosuggestion(suggestionOption);
    });

    /* Return result from console log
        Selected Item:  {text: "Argentina", itemid: "20", desc: "Argentina is a country"}
    */

How to use Suggestion box component multiple times

Call the wrapper class every time for different input box by passing unique ID of the box. 

    
    
        var suggestionOption = {...};

        window.addEventListener('load', function () {
            window.A11yWrapper('#input_box_1').autosuggestion(suggestionOption);
            window.A11yWrapper('#input_box_2').autosuggestion(suggestionOption);
        });

Accessibility

Keyboard interaction

  • ESC - ESC key press will close the suggestion box and Input box will gain focus
  • TAB - Press TAB to focus the input box. Pressing TAB again would move focus to Cross (X) icon
  • RETURN/ ENTER - Pressing Enter will select the item from suggeion list
  • UP or DOWN arrow - Use these keys to navigate between suggestion list items