CodeIgniter Forums
Live search with ajax - Printable Version

+- 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. Smile


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(Big Grin).
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