Komarzer Komarzer - 4 months ago 8
SQL Question

Create search field and update view dynamically

I have a method in my Controller that pass User data to the view :

$user['where'] = array('user.id_company' => $company_id);
$data['users'] = $this->user_model->getListDetailled_sending($user);


And with this, I display the data like this :

<div class="col-md-4">
<div class="portlet light">
<div class="portlet-title">
<div class="caption font-blue-sunglo"> <i class="fa fa-user-secret font-blue-sunglo"></i> <span class="caption-subject bold uppercase"> Utilisateurs</span> </div>
<input id="searchUser" type="text" placeholder="Chercher un utilisateur" class="form-control" onchange="searchUser(this)">
</div>
<div class="md-checkbox-list">

foreach ($users as $value){

echo "<div class=\"md-checkbox\">";
echo "<input id=\"usersbox[".$value->id_user."]\" name=\"usersbox[".$value->id_user."]\" groups=\"".$value->groups."\" class=\"md-check users\" type=\"checkbox\">";
echo "<label for=\"usersbox[".$value->id_user."]\">";
echo "<span class=\"inc\"></span>";
echo "<span class=\"check\"></span>";
echo "<span class=\"box\"></span>";
$label = ($this->session->userdata['logged_in']['acl_id'] == 10) ? $value->name. " ".$value->firstname : $value->name. " ".$value->firstname;
echo $label;
echo "</label>";
echo "</div>";
}
?>
</div>
</div>
</div>


What I want to do is create a search field that will sorte these data. It looks like this at the moment. I would like to be able to write something in the textbox and only display data the current checkboxes that contains the current value in the textbox.

enter image description here

I thought about using Javascript, and recalling the Controller method with a parameter, and refreshing the page (a sql query with contains on the name and firstname), but I don't want to recall the entire database, since it needs to sort the displayed data.
I don't know what's the best way to do this.

EDIT : My current not working so well solution :

function myFunction(obj) {
div = document.getElementById("userDiv");
div.innerHTML = '';
var ajax_url = "<?php echo site_url('sending/form/searchUser/');?>";
var search = obj.value;
$.ajax({
type: "POST",
url: ajax_url,
data: { 'search': search },
success: function(data){
// Parse the returned json data
var opts = $.parseJSON(data);
//console.log(opts);
// Use jQuery's each to iterate over the opts value
$.each(opts, function(i, d) {
// You will need to alter the below to get the right values from your json object.
console.log(i);
console.log(d.id_user);

div.innerHTML += '<div class=\"md-checkbox\"><input id=\"usersbox[' + d.id_user + ']\" name=\"usersbox[' + d.id_user + ']\" class=\"md-check users\" type=\"checkbox\"><label for=\"usersbox[' + d.id_user + ']\"><span class=\"inc\"></span><span class=\"check\"></span><span class=\"box\"></span>' + d.name + ' ' + d.firstname + '</label></div>';

});
}
});
}

Answer


You can replace your php code with javascript code and append the results to html.

<div class="col-md-4">
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption font-blue-sunglo"> <i class="fa fa-user-secret font-blue-sunglo"></i> <span class="caption-subject bold uppercase"> Utilisateurs</span> </div>
            <input id="searchUser" type="text" placeholder="Chercher un utilisateur" class="form-control" onkeyup="searchUser(this)">
        </div>
        <div id="users">
        </div>
    </div>
</div>

And the js:

<script>
//on load all the names will be displayed, if you want results just after you type an character in the input delete this
window.onload = searchUser('');

//better to call this function "onkeyup" 
function searchUser(user) {
    //this may vary if you have an object or array in php (i used array)
    var users = <?php echo json_encode($users); ?>;
    var usersHtmlDiv = $('#users');

    //this deletes the child nodes on a new search
    usersHtmlDiv.empty();
    var htmlFormat = '';
    var input = (user.value) ? user.value : '';
    users.forEach(function(entry) {
        console.log(entry);
        console.log(entry.id);

        //you can add firstname too here
        if(entry.name.startsWith(input) || entry.firstname.startsWith(input)) {

            htmlFormat += "<div class=\"md-checkbox\">";
            htmlFormat += "<input id=\"usersbox[" + entry.id_user + "]\" name=\"usersbox[" + entry.id_user + "]\" groups=\"" + entry.groups +"\" class=\"md-check users\" type=\"checkbox\">";
            htmlFormat += "<label for=\"usersbox[" + entry.id_user + "]\">";
            htmlFormat += "<span class=\"inc\"></span>";
            htmlFormat += "<span class=\"check\"></span>";
            htmlFormat += "<span class=\"box\"></span>";
            //here you have something about the session that does not make sense (check the if statement)
            htmlFormat += entry.name + " " + entry.firstname;
            htmlFormat += "</label>";
            htmlFormat += "</div>";
        }
    });
    //append the resulted html to the users div
    usersHtmlDiv.append(htmlFormat);
}

Also you may want to clean a little the code. You use name and firstname variables, try using firstname and lastname.

Have a nice day,
I.M.

Comments