# Class: Autocomplete

## Autocomplete

#### new Autocomplete(userOptions)

  Autocomplete

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---

  `userOptions`

  Object

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `$searchField` | HTMLElement |  |  |
  `$panelWrapper` | HTMLElement | <optional> | document.body |
  `maxHeight` | number | <optional> | 200 |
  `useCache` | Boolean | <optional> | false |
  `minchar` | Number | <optional> | 3 |
  `source` |  | <optional> |  |
  `url` | String |  |  |
  `cssPositionning` | String | <optional> | false | Use CSS or Javascript for the position of the layer
  `updateOnSelect` | boolean | <optional> | true | Update or not the text field with the selected value
  `onSelect` | Callback | <optional> |  | ({ item, query, resultsList }) => {}
  `queryParams` | Callback | <optional> | query => { return { "search": query } } |
  `normalize` | function | <optional> | data => data | Conver the ajax response in the good JSON format => {success, results}
  `renderFieldValue` | function | <optional> | ({item, query, resultList}) => item.name | Allow to manipulate the displayed value of items
  `render` | function | <optional> | ({resultItem, query, index, itemsList, cssClass}) => `<li role="option" data-idx="${index}" class="${cssClass.item}"><a class="${cssClass.link}">${resultItem.markedName}</a></li>` |
  `renderList` | function | <optional> | ({resultList, query, cssClass}) => `<ul role="listbox" class="${cssClass.list}">${resultList.join('')}</ul>` |
  `renderError` | function | <optional> | ({errorMsg, query, cssClass}) => `<li class="${cssClass.error}">${errorMsg}</li>` |
  `renderMark` | function | <optional> |  | Allow to wrap the query with a tag in the result item name ({resultItem, reQuery, query, index, resultList, cssClass}) => {resultItem.name && (resultItem.markedName = resultItem.name.replace(reQuery,`$1`));}

  `l10n`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `noResult` | String | <optional> | No result |
  `error` | String | <optional> | Server error |

  `className`

  Object

  <optional>

  ###### Properties

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `layer` | String | <optional> | ac-layer |
  `list` | String | <optional> | ac-list |
  `item` | String | <optional> | acl-itm |
  `mark` | String | <optional> | acl-mrk |
  `error` | String | <optional> | acl-error |
  `hover` | String | <optional> | hover |
  `disable` | String | <optional> | disable |

  See:
    - extra/modules/autocomplete.md for details.

### Methods

#### clean()

  Destroy the Autocomplete

  ##### Returns:

  Type
    Autocomplete

#### disable()

  Disable the autocomplete

  ##### Returns:

  Type
    Autocomplete

#### enable()

  Enable the autocomplete

  ##### Returns:

  Type
    Autocomplete

#### reset()

  Reset the input field and the results

#### resetField()

  Reset the input field

#### resetResults()

  Reset the results

#### setOptions(newOption)

  Update the current options

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `newOption` | Object | Same options as constructor

  ##### Returns:

  Type
    Autocomplete

#### showAll()

  When 'source' is used, display the list with all items

  ##### Returns:

  Type
    Autocomplete

#### Search results