I'm new to CakePHP3 (+stackoverflow) and try to implement autocomplete. I'd like to attach the autocomplete-function to the searchinput in my index.ctp.
Would be fine to get some help - thanks!
index.ctp
<?php
echo $this->Form->create('Cars');
echo $this->Form->input('name', [
'label' => 'Search',
'id' => 'autocomplete',
'class' => 'ui-autocomplete'
]);
echo $this->Form->button('Search', ['type' => 'submit']);
echo $this->Form->end();
?>
<script>
$("#autocomplete").autocomplete(
{
search: function () {},
source: function (request, response)
{
$.ajax(
{
source: "/cars/autocomplete",
dataType: "json",
data:
{
term: request.term,
},
success: function (data)
{
response(data);
console.log(data);
}
});
},
minLength: 2
});
</script>
CarsController.php
function autocomplete() {
if ($this->request->is('ajax','get')) {
$term = $this->request->data["term"];
$terms = $cars->find('all', [
'conditions' => ['Cars.name >' => $term],
'limit' => 10
]);
$data = array();
foreach($terms as $term) {
$row = $term->name;
array_push($data, $row);
}
// $this->layout = 'ajax';
$this->set('terms', $terms);
echo json_encode($data);
// return json_encode($data);
}
else {
echo json_encode('Nothings found');
}
}
Okay, I just found a solution (may be not a perfect?!). Here's my code
index.ctp
<script>
$( function() {
$( "#autocomplete" ).autocomplete({
minLength: 1,
source: function( request, response ) {
$.ajax({
url: "<?php echo Router::url(['controller' => 'Cars', 'action' => 'autocomplete']);?>" + '?term=' +
request.term,
dataType: "json",
success: function (data)
{
response(data);
console.log(data);
}
});
}
});
});
</script>
CarsController.php action autocomplete
public function autocomplete() {
$this->autoRender = false;
$terms = $this->Cars->find('list', array(
'conditions' => array(
'Cars.name LIKE' => trim($this->request->query['term']) . '%'
)
));
echo json_encode($terms);
}