<!DOCTYPE html>
<html>
    <head>
        <title>All Users.</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.min.css'?>" >
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    </head>

    <body>
    
    <div class="navbar navbar-dark bg-dark">
        <div class="container">
            <a href="a" class="navbar-brand">Ibo 4k</a>
        </div>
    </div>

    <div class="container" style="padding-top: 10px;">

        <div class="row">
            <div class="col-6"><h3>Ibo 4k Users</h3></div>
            <div class="col-6 text-right">
                <a href="<?php echo base_url().'index.php/Users/editportal'?>" class="btn btn-primary">Change Domain</a>
                <a href="<?php echo base_url().'index.php/Users/logout'?>" class="btn btn-danger">Logout</a>
                </div>
        </div>
        <hr>
        
    <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
    </div>
    </div>

    <div id="result" class="row">

    </div>
  
    </div>

    </body>
</html>

<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"<?php echo base_url(); ?>Users/fetch",
   method:"POST",
   data:{query:query},
   success:function(data){
    $('#result').html(data);
   }
  })
 }

 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
</script>