macTagAutocomplete

A directive for generating tag input with autocomplete support on text input. Tag autocomplete has priority 800

Parameters:
Name Type Description
mac-tag-autocomplete-source String

Data to use. Source support multiple types:

  • Array: An array can be used for local data and there are two supported formats:
    • An array of strings: ["Item1", "Item2"]
    • An array of objects with mac-autocomplete-label key: [{name:"Item1"}, {name:"Item2"}]
  • String: Using a string as the source is the same as passing the variable into mac-autocomplete-url
  • Function: A callback when querying for data. The callback receive two arguments:
    • {String} Value currently in the text input
    • {Function} A response callback which expects a single argument, data to user. The data will be populated on the menu and the menu will adjust accordingly
mac-tag-autocomplete-value String

The value to be sent back upon selection (default "id")
mac-tag-autocomplete-label String

The label to display to the users (default "name")
mac-tag-autocomplete-model Expr

Model for autocomplete
mac-tag-autocomplete-selected Array

The list of elements selected by the user (required)
mac-tag-autocomplete-query String

The query parameter on GET command (defualt "q")
mac-tag-autocomplete-delay Integer

Time delayed on fetching autocomplete data after keyup (default 800)
mac-tag-autocomplete-placeholder String

Placeholder text of the text input (default "")
mac-tag-autocomplete-disabled Boolean

If autocomplete is enabled or disabled (default false)
mac-tag-autocomplete-on-success function

Function called on successful ajax request (Proxy attribute for macAutocomplete)

  • data - {Object} Data returned from the request
  • status - {Number} The status code of the response
  • header - {Object} Header of the response
mac-tag-autocomplete-on-enter Expr

When autocomplete is disabled, this function is called on enter, Should return either string, object or boolean. If false, item is not added

  • item - {String} User input
mac-tag-autocomplete-clear-input Event

$broadcast message; clears text input when received
mac-tag-autocomplete-blur expression

Callback function on blur

  • $event - {Event} Event object
  • ctrl - {MacTagAutocompleteController} Tag autocomplete element controller
  • value - {String} Text input
mac-tag-autocomplete-focus expression

Callback function on focus

  • $event - {Event} Event object
  • ctrl - {MacTagAutocompleteController} Tag autocomplete element controller
  • value - {String} Text input
mac-tag-autocomplete-keyup expression

Callback function on keyup

  • $event - {Event} Event object
  • ctrl - {MacTagAutocompleteController} Tag autocomplete element controller
  • value - {String} Text input
mac-tag-autocomplete-keydown expression

Callback function on keydown

  • $event - {Event} Event object
  • ctrl - {MacTagAutocompleteController} Tag autocomplete element controller
  • value - {String} Text input
mac-tag-autocomplete-keypress expression

Callback function on keypress

  • $event - {Event} Event object
  • ctrl - {MacTagAutocompleteController} Tag autocomplete element controller
  • value - {String} Text input
Examples

Basic example

<mac-tag-autocomplete
  mac-tag-autocomplete-source = "autocompleteUrl"
  mac-tag-autocomplete-query = "q"
  mac-tag-autocomplete-selected = "tagAutocompleteSelected"
  mac-tag-autocomplete-value = "id"
  mac-tag-autocomplete-label = "name"
  mac-tag-autocomplete-placeholder = "tagAutocompletePlaceholder"
  mac-tag-autocomplete-model = "tagAutocompleteModel"
/>

Example with autocomplete disabled

<mac-tag-autocomplete
  mac-tag-autocomplete-selected = "tagAutocompleteDisabledSelected"
  mac-tag-autocomplete-placeholder = "tagAutocompletePlaceholder"
  mac-tag-autocomplete-value = ""
  mac-tag-autocomplete-label = ""
  mac-tag-autocomplete-disabled = "true"
/>