This method generates an input tag and inline javascript code that starts Awesomplete. Use this in (L)EEx templates. For HEEx templates it recommended to use <.input in combination with awesomplete_script/2.

Awesomplete options:

• ajax - Replace ajax function. Supplied function receives these parameters: (url, urlEnd, val, fn, xhr). fn is the callback function. Default: AwesompleteUtil.ajax.
• assign - Assign the Awesomplete object to a variable. true/false/name. If true the variable name will be 'awe_' + id of input tag. Default: false
• autoFirst - true/false. Automatically select the first element. Default: false.
• combobox - Id of the combobox button. true/false/id. If true the assumed button id is 'awe_btn_' + id of the input tag. Default: false
• container - Container function as defined in Awesomplete. By default a div element is added as the parent of the input element.
• convertInput - Convert input function. Internally convert input for comparison with the data list items. By default it trims the input and converts it to lowercase for a case-insensitive comparison.
• convertResponse - Convert JSON response from ajax calls. This function is called with the parsed JSON, and allows conversion of the data before further processing. Default: nil - no conversion.
• data - Data function as defined in Awesomplete
• debounce - Time in milliseconds to wait for additional user input before doing the ajax call to retrieve suggestions. It limits the rate at which the json service is called per user session.
• descr - Name of the field in the data list (the JSON response) that contains the description text to show below the value in the suggestion list. Default: no description
• descrSearch - true/false. Filter must also search the input value in the description field. Default: false
• filter - Filter function as defined in Awesomplete. Mostly use Awesomplete.FILTER_STARTSWITH or Awesomplete.FILTER_CONTAINS. If label is different as value, filter on value with AweompleteUtil.filterStartsWith, AwesompleteUtil.filterContains or AwesompleteUtil.filterWords. To turn off filtering, use AwesompleteUtil.filterOff.
• item - Item function as defined in Awesomplete. Default is to highlight all occurrences of the input text. Use AwesompleteUtil.itemStartsWith if that matches with the used filter.
• label - Name of the field in the data list (the JSON response) that contains the text that should be shown instead of the value.
• list - Data list as defined in Awesomplete.
• listLabel - Denotes a label to be used as aria-label on the generated autocomplete list.
• loadall - true/false. Use true if the data list contains all items, and the input value should not be used in ajax calls. Default: false
• limit - number. If a limit is specified, and the number of items returned by the server is equal or more as this limit, the AwesompleteUtil code assumes that there are more results, so it will re-query if more characters are typed to get more refined results. The limit:1 tells that not more than 1 result is expected, so the json service doesn’t have to return an array. With limit:0 it will always re-query if more characters are typed and the result doesn't have to be an array either. Limit:-1 will always requery and the expected result is an array. When no limit is specified, the code assumes that all possible suggestions are returned based on the typed characters, and it will not re-query if more characters are typed. It uses the specified filter for the suggestions in the dropdown. Default: no limit
• maxItems - Maximum number of suggestions to display. Default: 10
• minChars - Minimum characters the user has to type before the autocomplete popup shows up. Default: 2
• multiple - true/false/characters. Separators to allow multiple values. If true, the separator will be the space character. Default: false
• nonce - Content-Security-Policy nonce attribute for the script tag. Default: no nonce. If specified it must contain a non-empty value.
• prepop - true/false. If true do lookup initial/autofilled value and send awesomplete-prepop event. Default: false
• replace - Replace function as defined in Awesomplete
• sort - Sort function as defined in Awesomplete
• url - url for ajax calls.
• urlEnd - Addition at the end of the url for the ajax call, after the input value. Or a function, which receives the value and must return the last part of the url after the base url.
• value - Name of the field in the data list (the JSON response) that contains the value.

Example

iex> {:safe, [inp, scr]} = PhoenixFormAwesomplete.awesomplete(:user, :eyes, 
...> ["data-list": "blue, brown, green"],
...>  %{ minChars: 1, multiple: ",;", nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S" } )
iex> to_string inp
"<input data-list=\"blue, brown, green\" id=\"user_eyes\" name=\"user[eyes]\" type=\"text\">"
iex> scr
"<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.start('#user_eyes', " <> 
"{convertInput: function(input) {" <>
" return input.replace(/[,;]\\s*$/, '').match(/[^,;]*$/)[0].trim().toLowerCase(); }}, " <>
"{minChars: 1, " <> 
"replace: function(data) {" <>
" var text=data.value;" <> 
" this.input.value = this.input.value.match(/^.+[,;]\\s*|/)[0] + text + ', '; }, " <>
"filter: function(data, input) {" <>
" return Awesomplete.FILTER_CONTAINS(data, input.match(/[^,;]*([,;]\\s*)?$/)[0]); }, " <>
"item: function(text, input) {" <>
" return AwesompleteUtil.itemContains(text, input.match(/[^,;]*([,;]\\s*)?$/)[0]); }});" <>
"</script>"

This method generates javascript code for using Awesomplete(Util).

Example

iex> ff = %Phoenix.HTML.FormField{form: "user", field: "hobby", id: "user_hobby", name: "user[hobby]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.awesomplete_js(ff , %{ minChars: 1 } )    
"AwesompleteUtil.start('#user_hobby', {}, {minChars: 1});"

This method generates javascript code for using Awesomplete(Util).

Example

iex> PhoenixFormAwesomplete.awesomplete_js(:user, :hobby, %{ minChars: 1 } )
"AwesompleteUtil.start('#user_hobby', {}, {minChars: 1});"

This method generates a script tag with javascript code for using Awesomplete(Util).

Example

iex> ff = %Phoenix.HTML.FormField{form: "user", field: "hobby", id: "user_hobby", name: "user[hobby]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.awesomplete_script(ff, %{ minChars: 1 } )
{:safe,
 "<script>AwesompleteUtil.start('#user_hobby', {}, {minChars: 1});</script>"}

iex> PhoenixFormAwesomplete.awesomplete_script(:user, :hobby, %{ minChars: 1, nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S" } )
{:safe,
 "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.start('#user_hobby', {}, {minChars: 1});</script>"}

This method generates a script tag with javascript code for using Awesomplete(Util). As awesomplete_script/2 but with form and field parameters as used in Phoenix.HTML.Form functions instead of the Phoenix.HTML.FormField. The form parameter is either a Phoenix.HTML.Form struct or an atom.

Example

iex> PhoenixFormAwesomplete.awesomplete_script(:user, :hobby, %{ minChars: 1 } )
{:safe,
 "<script>AwesompleteUtil.start('#user_hobby', {}, {minChars: 1});</script>"}

iex> PhoenixFormAwesomplete.awesomplete_script(:user, :hobby, %{ minChars: 1, nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S" } )
{:safe,
 "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.start('#user_hobby', {}, {minChars: 1});</script>"}

As copy_value_to_field/3 but with form and field parameters as used in Phoenix.HTML.Form functions instead of the Phoenix.HTML.FormField's. The source_form and target_form parameters are either a Phoenix.HTML.Form struct or an atom.

Example

iex> PhoenixFormAwesomplete.copy_to_field(:user, :color, "label", :door, :paint)  
{:safe,
 "<script>AwesompleteUtil.startCopy('#user_color', 'label', '#door_paint');</script>"}

Same as copy_to_field/5 but with an additional last argument for the script attributes.

Example

iex> PhoenixFormAwesomplete.copy_to_field_script(:user, :color, "label", :door, :paint, [nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S"])
{:safe,
 "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.startCopy('#user_color', 'label', '#door_paint');</script>"}

As copy_value_to_id/3 but with form and field parameters as used in Phoenix.HTML.Form functions instead of the Phoenix.HTML.FormField. The source_form parameter is either a Phoenix.HTML.Form struct or an atom.

Example

iex> PhoenixFormAwesomplete.copy_to_id(:user, :color, "label", "#awe-color-result") 
{:safe,
 "<script>AwesompleteUtil.startCopy('#user_color', 'label', '#awe-color-result');</script>"}

As copy_value_to_id_js/3 but with form and field parameters as used in Phoenix.HTML.Form functions instead of the Phoenix.HTML.FormField. The source_form and target_form parameters are either a Phoenix.HTML.Form struct or an atom.

Example

iex> PhoenixFormAwesomplete.copy_to_id_js(:user, :color, "label", "#awe-color-result") 
"AwesompleteUtil.startCopy('#user_color', 'label', '#awe-color-result');"

Same as copy_to_id/4 but with an additional last argument for the script attributes.

Example

iex> PhoenixFormAwesomplete.copy_to_id_script(:user, :color, "label", "#awe-color-result", [nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S"])
{:safe,
 "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.startCopy('#user_color', 'label', '#awe-color-result');</script>"}

Create script tag with javascript that listens to awesomplete-prepop and awesomplete-match events on the source form field, and copies the data_field to the target form field.

Example

iex> ff_source = %Phoenix.HTML.FormField{form: "palet", field: "color", id: "palet_color", name: "palet[color]", errors: [], value: nil} 
iex> ff_target = %Phoenix.HTML.FormField{form: "palet", field: "paint", id: "palet_paint", name: "palet[paint]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.copy_value_to_field(ff_source, "label", ff_target)  
{:safe,
 "<script>AwesompleteUtil.startCopy('#palet_color', 'label', '#palet_paint');</script>"}

Same as copy_value_to_field/3 but with an additional last argument for the script attributes.

Example

iex> ff_source = %Phoenix.HTML.FormField{form: "palet", field: "color", id: "palet_color", name: "palet[color]", errors: [], value: nil} 
iex> ff_target = %Phoenix.HTML.FormField{form: "palet", field: "paint", id: "palet_paint", name: "palet[paint]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.copy_value_to_field_script(ff_source, "label", ff_target, [nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S"])
{:safe,
 "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.startCopy('#palet_color', 'label', '#palet_paint');</script>"}

Create script tag with javascript that listens to awesomplete-prepop and awesomplete-match events, and copies the data_field to the DOM element with the given target id. The target id is passed to the DOM document querySelector, and is typically set as a hash character with an element id. The target_id can also be a javascript function.

Example

iex> ff = %Phoenix.HTML.FormField{form: "palet", field: "color", id: "palet_color", name: "palet[color]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.copy_value_to_id(ff, "label", "#awe-color-result") 
{:safe,
 "<script>AwesompleteUtil.startCopy('#palet_color', 'label', '#awe-color-result');</script>"}

Create javascript that listens to awesomplete-prepop and awesomplete-match events, and copies the data_field to the DOM element with the given target id. The target id is passed to the DOM document querySelector, and is typically set as a hash character with an element id. The target_id can also be a javascript function.

Example

iex> ff = %Phoenix.HTML.FormField{form: "palet", field: "color", id: "palet_color", name: "palet[color]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.copy_value_to_id_js(ff, "label", "#awe-color-result") 
"AwesompleteUtil.startCopy('#palet_color', 'label', '#awe-color-result');"

Same as copy_value_to_id/4 but with an additional last argument for script attributes.

Example

iex> ff = %Phoenix.HTML.FormField{form: "palet", field: "color", id: "palet_color", name: "palet[color]", errors: [], value: nil} 
iex> PhoenixFormAwesomplete.copy_value_to_id_script(ff, "label", "#awe-color-result", [nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S"])
{:safe,
 "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">AwesompleteUtil.startCopy('#palet_color', 'label', '#awe-color-result');</script>"}

Create script tag with the supplied script. No defer or async because this is used for inline script.

Example

iex> PhoenixFormAwesomplete.script("alert(1);")
{:safe, "<script>alert(1);</script>"}

Same as script/1 with a second argument for the script attributes.

Example

iex> PhoenixFormAwesomplete.script("alert(1);" , [nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S"])
{:safe, "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">alert(1);</script>"}

iex> PhoenixFormAwesomplete.script("alert(2);" , %{nonce: "KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S"})
{:safe, "<script nonce=\"KG2FJFSN4LaCNyVRwTxRJjCB94Bdc41S\">alert(2);</script>"}

iex> PhoenixFormAwesomplete.script("alert(3);" , %{type: "module", id: "x42"})
{:safe, "<script id=\"x42\" type=\"module\">alert(3);</script>"}