Auto complete

<form method="get" action="http://a/synchronous/address/could/go/here/for/no/js"
   class="fly-out autocomplete"
   data-js="autocomplete"
   data-autocomplete-action="../../data/schools.json"
   data-autocomplete-redirect="true"
   data-autocomplete-verbatim="false"
  >
  <div class="form-field autocomplete__field" >
    <input id="school-search" name="school-search" type="text" placeholder="Enter a school name" class="input-text input-text--box has-icon-right" data-js="autocomplete-input" autocomplete="off">
      <button type="submit" class="btn icon icon--search-black autocomplete__submit">Submit</button>
  </div>
  <nav class="nav nav--chrome fly-out__content">
    <ul class="nav__list nav__list--chrome nav__list--chrome-scroll autocomplete__results" data-js="autocomplete-results"></ul>
  </nav>
</form>

<form method="get" action="http://a/synchronous/address/could/go/here/for/no/js"
   class="fly-out autocomplete"
   data-js="autocomplete"
   data-autocomplete-action="../../data/schools.json"
   data-autocomplete-redirect="false"
   data-autocomplete-verbatim="true"
  >
  <div class="form-field autocomplete__field" data-js="form-field">
      <label for="school-search-name" class="form-field__label">School search with no redirect</label>
    <input id="school-search-name" name="school-search-name" type="text" placeholder="Enter a school name" class="input-text has-icon-right" data-js="autocomplete-input" autocomplete="off">
  </div>
  <nav class="nav nav--chrome fly-out__content">
    <ul class="nav__list nav__list--chrome nav__list--chrome-scroll autocomplete__results" data-js="autocomplete-results"></ul>
  </nav>
</form>

Introduction

The auto complete search component is designed to make it is easier for a user to find something from a data set which is otherwise unwieldy to manually browse. It functions asynchronously using an AJAX GET. It is highly recommended that it functions as a normal synchronous search form if no JavaScript runs (but this does require additional design and development to create the relevant results page).

The default action attribute on the form can be used to define a different URL for non-AJAX requests. The AJAX request uses a data attribute defined by the $.pfAutoComplete.getURLAttr property, and is accessed like so: $form.data($.pfAutoComplete.getURLAttr).

Source files

Dependencies

[
  {
    "name":"Carey School of Business",
    "description": "Arizona State University",
    "keyword": "CSB",
    "url": "https://prodigyfinance.com/arizona-state-university-carey/loan"
  },
  {
    "name":"Olin School of Business",
    "description": "Babson College",
    "keyword": "OSB",
    "url": "https://prodigyfinance.com/babson-college/loan"
  },
  {
    "name":"Carroll School of Management",
    "description": "Boston College",
    "keyword": "CSM",
    "url": "https://prodigyfinance.com/boston-college-carroll-school-of-management/loan"
  },
  {
    "name":"Harvard Business School",
    "description": "Harvard University",
    "keyword": "HBS",
    "url": "https://prodigyfinance.com/harvard-business-school/loan"
  },
  {
    "name":"Harvard Business School 1",
    "description": "Harvard University",
    "keyword": "HBS",
    "url": "https://prodigyfinance.com/harvard-business-school/loan"
  },
  {
    "name":"Harvard Business School 2",
    "description": "Harvard University",
    "keyword": "HBS",
    "url": "https://prodigyfinance.com/harvard-business-school/loan"
  },
  {
    "name":"Harvard Business School 3",
    "description": "Harvard University",
    "keyword": "HBS",
    "url": "https://prodigyfinance.com/harvard-business-school/loan"
  },
  {
    "name":"Harvard Business School 4",
    "description": "Harvard University",
    "keyword": "HBS",
    "url": "https://prodigyfinance.com/harvard-business-school/loan"
  },
  {
    "name":"School without Description",
    "description": "",
    "keyword": "HBS",
    "url": "https://prodigyfinance.com/harvard-business-school/loan"
  }
]

Usage