Example 1

$form = new Form('plugins-search-form-1');

$addon = '<button class="btn btn-success" type="button">
    <i class="bi bi-search" aria-hidden="true"></i>
</button>';
$form->addAddon('search-input-1', $addon, 'after');
$form->addHelper('Type for example "A"', 'search-input-1');
$form->addInput('text', 'search-input-1', '', 'Search something:', 'placeholder=Search here ...');

$src = [
    'src' => [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ]
];

$form->addPlugin('autocomplete', '#search-input-1', 'default', $src);

<div class="row mb-3">
	<label for="search-input-1" class="col-sm-4 col-form-label">
		Search something:
	</label>
	<div class="col-sm-8">
		<div class="input-group has-addon-after">
			<input id="search-input-1" name="search-input-1" type="search" value=""  aria-describedby="search-input-1-helper" placeholder="Search here ..." class="form-control">
			<button class="btn btn-success input-group-btn phpfb-addon-after" type="button">
				    <i class="bi bi-search" aria-hidden="true"></i>
			</button>
		</div>
		<span class="form-text" id="search-input-1-helper">Type for example "A"</span>
	</div>
</div>

Example 2 - Autocomplete with several data-attributes enabled

Result list items must start with the search string
debounce (delay before searching)
maximum results = 5
threshold (2 characters minimum before search)

$form = new Form('plugins-search-form-2');

$addon = '<button class="btn btn-success" type="button">
    <i class="bi bi-search" aria-hidden="true"></i>
</button>';
$form->addAddon('search-input-2', $addon, 'after');
$form->addHelper('Type for example "A"', 'search-input-2');
$form->addInput('text', 'search-input-2', '', 'Search something:', 'data-start-with=true, data-max-results=5, data-debounce=400, data-threshold=2, placeholder=Search here ...');

$src = [
    'src' => [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ]
];

$form->addPlugin('autocomplete', '#search-input-2', 'default', $src);

<div class="row mb-3">
	<label for="search-input-2" class="col-sm-4 col-form-label">
		Search something:
	</label>
	<div class="col-sm-8">
		<div class="input-group has-addon-after">
			<input id="search-input-2" name="search-input-2" type="search" value=""  aria-describedby="search-input-2-helper" data-start-with="true" data-max-results="5" data-debounce="400" data-threshold="2" placeholder="Search here ..." class="form-control">
			<button class="btn btn-success input-group-btn phpfb-addon-after" type="button">
				    <i class="bi bi-search" aria-hidden="true"></i>
			</button>
		</div>
		<span class="form-text" id="search-input-2-helper">Type 2 letters minimum</span>
	</div>
</div>

Example 3 - Autocomplete with Ajax search

$form = new Form('plugins-search-form-3');

$addon = '<button class="btn btn-success" type="button">
    <i class="bi bi-search" aria-hidden="true"></i>
</button>';
$form->addAddon('search-input-3', $addon, 'after');
$form->addHelper('Type at lease 2 characters', 'search-input-3');
$form->addInput('search', 'search-input-3', '', 'First name:', 'data-threshold=2, placeholder=Search here ...');

$src = ['src' => 'inc/javascript-plugins/complete.php'];

$form->addPlugin('autocomplete', '#search-input-3', 'ajax', $src);

<div class="row mb-3">
	<label for="search-input-3" class="col-sm-4 col-form-label">
		First name:
	</label>
	<div class="col-sm-8">
		<div class="input-group has-addon-after">
			<input id="search-input-3" name="search-input-3" type="search" value=""  aria-describedby="search-input-3-helper" data-threshold="2" placeholder="Search here ..." class="form-control">
			<button class="btn btn-success input-group-btn phpfb-addon-after" type="button">
				    <i class="bi bi-search" aria-hidden="true"></i>
			</button>
		</div>
		<span class="form-text" id="search-input-3-helper">Type at lease 2 characters</span>
	</div>
</div>

Example 4 - Autocomplete with Multiple choices & Ajax search

$form = new Form('plugins-search-form-4');

$addon = '<button class="btn btn-success" type="button">
    <i class="bi bi-search" aria-hidden="true"></i>
</button>';
$form->addAddon('search-input-4', $addon, 'after');
$form->addHelper('Type at lease 2 characters', 'search-input-4');
$form->addInput('search', 'search-input-4', '', 'First name:', 'data-multiple-choices=true, data-threshold=2, placeholder=Search here ...');

$src = ['src' => 'inc/javascript-plugins/complete.php'];

$form->addPlugin('autocomplete', '#search-input-4', 'ajax', $src);

<div class="row mb-3">
	<label for="search-input-4" class="col-sm-4 col-form-label">
		First name:
	</label>
	<div class="col-sm-8">
		<div class="input-group has-addon-after">
			<input id="search-input-4" name="search-input-4" type="search" value=""  aria-describedby="search-input-4-helper" data-multiple-choices="true" data-threshold="2" placeholder="Search here ..." class="form-control">
			<button class="btn btn-success input-group-btn phpfb-addon-after" type="button">
				    <i class="bi bi-search" aria-hidden="true"></i>
			</button>
		</div>
		<span class="form-text" id="search-input-4-helper">Type at lease 2 characters</span>
	</div>
</div>