anggadarkprince/data.php

## data.php
<?php

$data = [
    [
        'id' => 1,
        'title' => 'Alice in wonderland',
        'year' => '1993'
    ],
    [
        'id' => 2,
        'title' => 'Game of thrones',
        'year' => '2010'
    ],
    [
        'id' => 3,
        'title' => 'The walking dead',
        'year' => '2010'
    ],
    [
        'id' => 4,
        'title' => 'Prison Break',
        'year' => '2004'
    ],
    [
        'id' => 5,
        'title' => 'Person of interest',
        'year' => '2011'
    ],
    [
        'id' => 6,
        'title' => 'iZombie',
        'year' => '2014'
    ],
    [
        'id' => 7,
        'title' => 'Couga Linora',
        'year' => '2000'
    ],
    [
        'id' => 8,
        'title' => 'Spirit of soul',
        'year' => '2017'
    ],
];

$result = [];
foreach($data as $item){
    if (stripos($item['title'], $_GET['keyword']) !== false) {
        $result[] = $item;
    }
}

$data = array_slice($result, 0, rand(1, 8));

header('Content-Type: application/json');
echo json_encode($data);

## index.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/bootstrap.css" rel='stylesheet' type='text/css'>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/typeahead.bundle.js"></script>

	<style>
	.tt-menu {
        min-width: 300px;
        margin: 5px 0;
        padding: 8px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
    }
    .tt-menu .tt-suggestion{
        padding: 3px 15px;
        margin-bottom: 0px;
    }
    .tt-menu .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }
	</style>
</head>
<body>
<div class='container'>
    <p class='lead'>Type ahead remote suggestion</p>
    <input type="text" name="city" id="city" class="form-control typeahead" placeholder="Input data">
</div>
<script>
    var films = [
        {
            id: 44,
            title: 'Power Ranger',
            year: 1992
        },
        {
            id: 45,
            title: 'Ultraman',
            year: 1983
        }
    ];

    // constructs the suggestion engine
    var filmData = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: films,
      remote: {
          url: 'data.php?keyword=%QUERY',
          wildcard: '%QUERY'
      }
    });

    $('.typeahead').typeahead(null, {
      hint: true,
      highlight: true,
      name: 'films',
      display: 'title',
      minLength: 1,
      source: filmData,
      templates: {
        suggestion: function (data) {
            return '<p><strong>' + data.title + '</strong> - ' + data.year + '</p>';
        }
      }
    });
</script>
</body>
</html>
	<?php

	$data = [
	[
	'id' => 1,
	'title' => 'Alice in wonderland',
	'year' => '1993'
	],
	[
	'id' => 2,
	'title' => 'Game of thrones',
	'year' => '2010'
	],
	[
	'id' => 3,
	'title' => 'The walking dead',
	'year' => '2010'
	],
	[
	'id' => 4,
	'title' => 'Prison Break',
	'year' => '2004'
	],
	[
	'id' => 5,
	'title' => 'Person of interest',
	'year' => '2011'
	],
	[
	'id' => 6,
	'title' => 'iZombie',
	'year' => '2014'
	],
	[
	'id' => 7,
	'title' => 'Couga Linora',
	'year' => '2000'
	],
	[
	'id' => 8,
	'title' => 'Spirit of soul',
	'year' => '2017'
	],
	];

	$result = [];
	foreach($data as $item){
	if (stripos($item['title'], $_GET['keyword']) !== false) {
	$result[] = $item;
	}
	}

	$data = array_slice($result, 0, rand(1, 8));

	header('Content-Type: application/json');
	echo json_encode($data);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/bootstrap.css" rel='stylesheet' type='text/css'>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/typeahead.bundle.js"></script>

	<style>
	.tt-menu {
	min-width: 300px;
	margin: 5px 0;
	padding: 8px 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	}
	.tt-menu .tt-suggestion{
	padding: 3px 15px;
	margin-bottom: 0px;
	}
	.tt-menu .tt-suggestion:hover {
	cursor: pointer;
	color: #fff;
	background-color: #0097cf;
	}
	</style>
	</head>
	<body>
	<div class='container'>
	<p class='lead'>Type ahead remote suggestion</p>
	<input type="text" name="city" id="city" class="form-control typeahead" placeholder="Input data">
	</div>
	<script>
	var films = [
	{
	id: 44,
	title: 'Power Ranger',
	year: 1992
	},
	{
	id: 45,
	title: 'Ultraman',
	year: 1983
	}
	];

	// constructs the suggestion engine
	var filmData = new Bloodhound({
	datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
	queryTokenizer: Bloodhound.tokenizers.whitespace,
	local: films,
	remote: {
	url: 'data.php?keyword=%QUERY',
	wildcard: '%QUERY'
	}
	});

	$('.typeahead').typeahead(null, {
	hint: true,
	highlight: true,
	name: 'films',
	display: 'title',
	minLength: 1,
	source: filmData,
	templates: {
	suggestion: function (data) {
	return '<p><strong>' + data.title + '</strong> - ' + data.year + '</p>';
	}
	}
	});
	</script>
	</body>
	</html>