I'm trying to implement a "live search" function for my web app. Basic idea is very simple: user type's in keyword and AJAX will handle the request and returns all the rows from the database that matched the keyword. However, every time I type in something in my search form, it will return all the results and completely bypasses the actual keyword (like part).
I have tried to get this to work for hours now and can't really figure out the problem. I've tried with and without active record, it always gives me all the results from the database.
These are the only SQL statements it will consider:
$this->db->where('event_date >=', date('Y-m-d G:i:s'));
$this->db->where('visibility', 1);
Here's my View:
<!-- Search form -->
<?php $attributes = ['id' => 'search', 'autocomplete' => 'off'];
echo form_open('ajax/search', $attributes);?>
<input type="text" id="app-search" name="keyword" class="search-field" placeholder="Hae tapahtumaa nimellä tai paikkakunnalla...">
<i class="fa fa-search search-icon"></i>
<input type="submit" name="search" class="search-button" value="Hae">
<?php echo form_close();?>
<!-- div for the results -->
<div class="ajax-search-results">
<div class="spinner-for-search" id="search-list">
<i class="fa fa-circle-o-notch fa-2x fa-spin" id="ajax-loading-search" style="text-align: center;"></i>
</div>
</div>
Here's my JS (for AJAX request):
$(".ajax-search-results").hide();
$("#app-search").on("keyup", function(e) {
if($("#app-search").val().length > 5) {
$(".ajax-search-results").show();
$("#ajax-loading-search").show();
$.ajax({
type: "post",
url: $("#app-search").parent('form').attr('action'),
cache: false,
data:'search='+$("#app-search").val(),
success: function(response) {
$('.ajax-search-results').html("");
var obj = JSON.parse(response);
if(obj.length > 0){
try{
var items=[];
$.each(obj, function(i,val){
items.push($('<li/><a href=' + window.location.origin + '/Asiakastyot/STCodeIgniter/event/'+ val.event_id +'/>').text(val.event_name + "-" + val.event_city));
});
$('.ajax-search-results').append.apply($('.ajax-search-results'), items);
}catch(e) {
alert('Tapahtui virhe, yritä uudelleen tai ota yhteyttä palveluntarjoajaan...');
}
}else{
$('.ajax-search-results').html($('<li/>').text("Ei hakutuloksia"));
}
},
error: function(){
alert('Error while request..');
},
complete: function() {
$("#ajax-loading-search").hide();
}
});
}
return false;
});
Here's my model:
<?php
class Search_model extends CI_Model {
public function ajaxSearch($keyword)
{
$this->db->select('event_id, event_name, event_city')->from('events');
$this->db->like('event_name', $keyword);
$this->db->where('event_date >=', date('Y-m-d G:i:s'));
$this->db->where('visibility', 1);
$query = $this->db->get();
if($query->num_rows() >= 1) {
return $query->result();
}
}
}
And finally the controller:
<?php
class Ajax extends CI_Controller {
public function search() {
$this->load->model('search_model');
$search = $this->input->post('keyword');
$query = $this->search_model->ajaxSearch($search);
echo json_encode($query);
}
}
