autocomplete-select

inc file reusable content

id:autoComplete-inputField

elem:textarea

place:FTdata

class:form-control autocomplete-field ui-autocomplete-input

rows:1

bootstrap:false

style:next

resize:none

id:autocomplete-selected

elem:div

class:text-danger autocomplete-selected

value:nobody selected

place:selected-view

id:autocomplete-clear

elem:button

class:autocomplete-clear

inner:x

place:selected-view

elem:div

id:selected-view

class:d-flex justify-content-between

place:autocomplete-container

id:autocomplete-container

elem:div

class:form-control

place:autoComplete-ini-hidden-container

id:autoComplete-ini-hidden-container

elem:div

place:FTdata

class:autoComplete-ini-hidden-container

style:next

display:none

elem:script

place:end-script

id:autocomplete-code

long-value:var source_options=[square-bracket-start][autocomplete-merged-options][square-bracket-end]

$('.autocomplete-field').autocomplete({source: source_options});

$('.autocomplete-field' ).on( 'autocompleteselect', function( event, ui ) {

$('.auto_complete_target').val(ui.item.value);

$('.autocomplete-selected').text(ui.item.label);

$('.autocomplete-field').hide();

$('.hide-on-autocomplete-select').hide();

$('.autoComplete-ini-hidden-container').show();

} );

$( ".autocomplete-clear" ).on( "click", function() {

$('.autocomplete-field').val('');

$('.auto_complete_target').text('');

$('.autocomplete-field').show();

$('.autoComplete-ini-hidden-container').hide();

} );

in page content

1. inc: path to file with above lines

form with UI autocomplete field

value:

type naam om te selecteren

[autoComplete-inputField][autoComplete-ini-hidden-container]

fetches data

use-template:/contacts/data/anybody.txt

@arrID:UIoptionsArray

@addQuery:where (role.end = '0000-00-00' or role.end > NOW())

& and (role.group_id = 62 or role.group_id = 49 [@extra_group] )

& and user.id > 1

@select_columns:user.id as user_id

@anylimit:500

makes UI-options

applier:ArrayViewer

id:autocomplete-merged-options

src-array:UIoptionsArray

row_brackets:(;)

glue:,

row-template:{label:"(name)",value:"(user_id)"}

place:FTdata