erstellen Suchfeld ein und aktualisieren Ansicht dynamisch

Question

ich eine Methode in meinem Controller verwenden, die Benutzerdaten an die Ansicht übergeben:

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

Und mit diesem, zeige ich die Daten wie folgt aus:

<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> 

Ich möchte ein Suchfeld erstellen, das diese Daten sortiert. So sieht es momentan aus. Ich möchte in der Lage sein, etwas in das Textfeld zu schreiben und nur die aktuellen Kontrollkästchen anzuzeigen, die den aktuellen Wert in der Textbox enthalten.

Ich dachte über Javascript verwenden und mit einem Parameter der Controller-Methode erinnert, und die Seite aktualisieren (eine SQL-Abfrage mit enthält den Namen und Vornamen), aber ich mag nicht, dass die erinnern, gesamte Datenbank, da die angezeigten Daten sortiert werden müssen. Ich weiß nicht, was der beste Weg ist, dies zu tun.

EDIT: Meine aktuelle nicht so gut funktioniert Lösung:

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 1

Sie können Ihren PHP-Code mit JavaScript-Code und fügen Sie die Ergebnisse html ersetzen.

<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> 

Und die 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); 
} 

Sie können auch den Code ein wenig reinigen wollen. Sie verwenden Name und Vorname Variablen, versuchen Sie, Vorname und Nachname.

Haben Sie einen schönen Tag,
I. M.