Autocomplete Search With Accessibility - jQuery FindItFast

FindItFast is a jQuery plugin to provides an accessible, mobile-friendly autocomplete functionality for input field that supports both static and dynamic (via AJAX) data sources.

Accessibility for the impaired is often overlooked when building a website. It is a large subject to learn, and can be time-consuming to implement. This plugin is designed to cut down on that effort by providing a search autocomplete (form + list) built with all the necessary ARIA HTML.

How to use it:

1. Insert the jQuery FindItFast plugin's files into your page which has jQuery library loaded.

<link rel="stylesheet" href="css/findItFast.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery.finditfast.js"> </script>

2. Create a container in which you want to generate the Autocomplete input.

<div class="autoSearch"></div>

3. Call the function on the container element and config the data source. The plugin supports JSON objects, JS arrays and even AJAX urls.

$('.autoSearch').findItFast({
  dataConfig: {
    type: 'array', // or 'json', 'url'
    src: countriesARRAY
  }
})

4. All default configuration options.

$('.autoSearch').findItFast({
  dataConfig: {
    type: 'json',
    src: null, // json object, array or url of data
    valueName: null, // name of 'key' in JSON
    valueHref: null,
    maxItems: null,
    timer: 500 // millisecond delay after typing stops before data retrieval
  },
  initClass: 'findItFast-js',
  templates: {
    form: {
      method: 'get',
      action: '',
      name: '',
      label: 'Search',
      hideLabelText: false,
      placeholder: '',
      inputName: 'q',
      inputClass: '',
      clearSearchHtml: 'X',
      clearSearchAriaText: 'Clear search',
      submitType: 'text', // or icon
      submitHtml: 'Submit',
      submitAriaText: 'Submit'
    },
    listItems: {
      type: 'json',
      includeLinks: false,
      className: 'findItFast-item',
      position: 'bottom'
    }
  },
  ariaConfig: {
    srHiddenClass: 'sr-only',
    includeLiveRegion: false,
    liveMsg: {
      none: 'No suggestions found.',
      one: 'One suggestion found. Use up and down keys to navigate.',
      multiple: 'Multiple suggestions found. Use up and down keys to navigate.'
    }
  },
  eventConfig: {
    input: {
      onObjClick: function(e, obj){},
      onObjFocus: function(e, obj){
      autocomplete.closeAllAutocompletes()
      var list = obj.find('.' + CONSTANTS.itemList)

          if (list.length > 0) {
              list.fadeIn('fast')
          }
      },
      onObjBlur: function(e, obj){},
      onObjKeydown: function(e, obj){
        switch (e.which) {
          case keyCodes.TAB:
              return autocomplete.cancel(obj)
          case keyCodes.ESCAPE:
              return autocomplete.cancel(obj)
          case keyCodes.UP:
          case keyCodes.DOWN:
              return autocomplete.changeSelection(obj, e.which === keyCodes.UP ? -1 : 1)
          case keyCodes.ENTER:
              return autocomplete.cancel(obj)
          default:
              delay(function(){
              builders.generateListContainer(dataMethods.processList(e.target.value, obj), obj)
          }, opts.dataConfig.timer)
        }
      }
    },
    cancel: {
      onObjClick: function(e, obj){
        autocomplete.cancel(obj)
        builders.clearListItems(obj)
      },
      onObjFocus: function(e, obj){
        autocomplete.cancel(obj)
      },
      onObjBlur: function(e, obj){},
      onObjKeydown: function(e, obj){}
    },
    listItems: {
      onObjClick: function(e, obj){
        if(!opts.templates.listItems.includeLinks) {
          autocomplete.populateValue(e, obj)
          autocomplete.cancel(obj)
        }
      },
      onObjFocus: function(e, obj){
        autocomplete.populateValue(e, obj)
      },
      onObjBlur: function(e, obj){},
      onObjKeydown: function(e, obj){
        var input = obj.find('.' + CONSTANTS.inputClass)

        switch (e.which) {
          case keyCodes.ESCAPE:
            input.focus()
            return autocomplete.cancel(obj)
          case keyCodes.UP:
          case keyCodes.DOWN:
            return autocomplete.changeSelection(obj, e.which === keyCodes.UP ? -1 : 1)
          case keyCodes.ENTER:
            if(!opts.templates.listItems.includeLinks) {
              input.focus()
              $(this).click()
              return autocomplete.cancel(obj)
            } else {
              $(this)[0].click()
            }
          case keyCodes.TAB:
            e.preventDefault()
            input.next().focus()
          default:
            return false
        }
      }
    },
    form: {
      onObjSubmit: function(e, obj){
        e.preventDefault()
      }
    }
  }
})

Change log:

2018-03-10

• added 'Position' option for list items.

2018-03-09

• minor tweaks

2018-03-08

• updated for ajax calls

---

This awesome jQuery plugin is developed by dawnmessier. For more Advanced Usages, please check the demo page or visit the official website.