創建搜索字段和更新視圖動態

Question

我在我的控制器的方法，其傳遞的用戶數據給視圖：

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

而與此，我顯示數據是這樣的：

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

我想要做的是創建一個搜索字段，將這些數據分類。它現在看起來像這樣。我希望能夠在文本框中寫入某些內容，並僅顯示包含文本框中當前值的當前複選框的數據。

我想過使用Javascript，並回顧控制方法與參數，並刷新頁面（SQL查詢與包含名稱和姓名），但是我不想回憶整個數據庫，因爲它需要對顯示的數據進行排序。 我不知道做這件事的最好方法是什麼。

編輯：我現在的工作不那麼好解決方案：

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

您可以用JavaScript代碼替換你的PHP代碼，並將結果追加到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> 

而且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); 
} 

你也可能要清理一點點的代碼。您使用名字和名字變量，嘗試使用名字和姓氏。

有一個愉快的一天，
I.M.