RPeraltaJr
5/14/2017 - 7:59 AM

Search tool using AJAX and data from a database.

<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;
        }
    });
});