Documentation: https://jqueryui.com/autocomplete/
Plugin: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
<form class="search-form" action="searchresults" method="GET" role="search" autocomplete="off">
<label for="navbarKeyword" class="sr-only">Keyword</label>
<input type="search" placeholder="Search Opportunities" id="navbarKeyword" name="q" data-search>
<button type="submit">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</form>
<?php
include 'settings.php';
include 'db.php';
// Get search term
// * HTML Purifer (http://htmlpurifier.org/)
$searchTerm = $purifier->purify($_GET['term']);
$query = $db->prepare("SELECT title FROM $table_name WHERE title LIKE ? LIMIT 5");
$query->execute(array("%$searchTerm%"));
$rows = $query->fetchAll(PDO::FETCH_ASSOC);
$response = array();
foreach ($rows as $row) {
$row = (object) $row;
$response[] = $row->title;
}
echo json_encode($response);
$(function() {
$('[data-search]').autocomplete({
source: "includes/fetch-data.php",
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
let title = ui.item.label;
if( title.includes('&') ) {
// remove all characters after &
title = title.substring(0, title.indexOf('&'));
}
if( title.includes('-') ) {
// remove all characters after -
title = title.substring(0, title.indexOf('-'));
}
this.value = $('<div />').html(title).text();
return this.value;
}
});
});