+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: CodeIgniter 4 (https://forum.codeigniter.com/forumdisplay.php?fid=28)
+--- Forum: CodeIgniter 4 Support (https://forum.codeigniter.com/forumdisplay.php?fid=30)
+--- Thread: Live search with ajax (/showthread.php?tid=76934)
Live search with ajax - mohs3n - 07-05-2020
Hi
I've been looking for a tutorial on how to make a live user search with CI4 but I haven't found anything useful on the net.
I am creating a backend with CI4 and on the user management page I have a search input which I want to be a live search with ajax where I can start typing a name and it shows me suggestions.
Has anybody done this with CI4?
I'd appreciate if anybody could share their ideas or some code snippets.
RE: Live search with ajax - inumaru - 07-05-2020
There are many ways to do that, what did you use normally?
You could just modified it a little for ci4 or maybe no need to modify it and just use it, depend on the code.
maybe share some example of what you usually use here so I can see?
RE: Live search with ajax - mohs3n - 07-05-2020
This is what I've come up with so far:
Controller:
PHP Code:
public function userList()
{
if ($this->request->getMethod() == 'post') {
$users = new Auth();
$users = $users->havingLike('fullName', $this->request->getPost('search'))->get()->getResult();
foreach ($users as $user) {
$response[] = array("value" => $user->id, "label" => $user->fullName);
}
echo json_encode($response);
}
}
View:
Code:
<input type="text" id="autouser" class="form-control" placeholder="fullname">
<input type="text" id="userid" name="userid" value='0' >JS:
Code:
$(document).ready(function(){
// Initialize
$( "#autouser" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url: "/panel/services/userList",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
// Set selection
$('#autouser').val(ui.item.label); // display the selected text
$('#userid').val(ui.item.value); // save selected id to input
return false;
}
});
});It actually works and suggests the list of users and shows the id of the selected user.
The only issue I have now is the drop-down style:
RE: Live search with ajax - inumaru - 07-05-2020
well for the style, just style it using css or inline style if you want(
).From your picture I guest it use <ul> <li> as the dropdown list for the suggestion.
So just give it a class or inspect it to easier understanding of the tag used and style it.
Or if you want to use jqueryUI autocomplete they already have theme in their package.
RE: Live search with ajax - John_Betong - 07-05-2020
Here's a live search I wrote a long time ago, source supplied. It should be applied t,o Codeigniter quite easily:
http://johns-jokes.com/downloads/sp-e/jb-ajax-search/
RE: Live search with ajax - Kartew - 07-06-2020
Thanks for the info, I also want to try writing this search with an ajax. I think it should be processed faster