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
$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>