Автоматическое заполнение нескольких текстовых полей

Я новичок в кодеригере. Мне нужно выполнить автозаполнение множественного текстового поля, у меня есть код в php. Мне нужно написать это в codeigniter. Я не знаю, как это сделать в codeigniter ... Может ли кто-нибудь помочь мне код? Вот мой index.phpАвтоматическое заполнение нескольких текстовых полей

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="row main-content">   
      <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10 col-sm-offset-2 col-md-offset-2 col-lg-offset-2"> 

       <form id='students' method='post' name='students' action='index.php'> 
        <div class="table-responsive"> 
         <table class="table table-bordered"> 
          <tr> 
           <th><input class='check_all' type='checkbox' onClick="select_all()"/></th> 
           <th>S. No</th> 
           <th>Country Name</th> 
           <th>Country Number</th> 
           <th>Country Phone code</th> 
           <th>Country code</th> 
          </tr> 
          <tr> 
           <td><input type='checkbox' class='case'/></td> 
           <td><span id='snum'>1.</span></td> 
           <td><input class="form-control" type='text' id='countryname_1' name='countryname[]'/></td> 
           <td><input class="form-control" type='text' id='country_no_1' name='country_no[]'/></td> 
           <td><input class="form-control" type='text' id='phone_code_1' name='phone_code[]'/></td> 
           <td><input class="form-control" type='text' id='country_code_1' name='country_code[]'/> </td> 
          </tr> 
         </table> 
         <button type="button" class='btn btn-danger delete'>- Delete</button> 
         <button type="button" class='btn btn-success addmore'>+ Add More</button> 
        </div> 
       </form> 
      </div> 

     </div> 
    </div><!-- /container --> 

    <div class="clearfix"></div> 
    <script src="js/auto.js"></script> 
    </body> 
</html>

Это мой файл JS auto.js

$(".delete").on('click', function() { 
    $('.case:checkbox:checked').parents("tr").remove(); 
    $('.check_all').prop("checked", false); 
    check(); 
}); 
var i=$('table tr').length; 

$(".addmore").on('click',function(){ 
    count=$('table tr').length; 

    var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>"; 
    data +="<td><input class='form-control' type='text' id='countryname_"+i+"' name='countryname[]'/></td> <td><input class='form-control' type='text' id='country_no_"+i+"' name='country_no[]'/></td><td><input class='form-control' type='text' id='phone_code_"+i+"' name='phone_code[]'/></td><td><input class='form-control' type='text' id='country_code_"+i+"' name='country_code[]'/></td></tr>"; 
    $('table').append(data); 
    row = i ; 
    $('#countryname_'+i).autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_table', 
       row_num : row 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[0], 
         value: code[0], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|"); 
     id_arr = $(this).attr('id'); 
     id = id_arr.split("_");     
     $('#country_no_'+id[1]).val(names[1]); 
     $('#phone_code_'+id[1]).val(names[2]); 
     $('#country_code_'+id[1]).val(names[3]); 
    }    
    }); 

    $('#country_code_'+i).autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_table', 
       row_num : row 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[3], 
         value: code[3], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|"); 
     id_arr = $(this).attr('id'); 
     id = id_arr.split("_");   
     $('#country_no_'+id[1]).val(names[1]); 
     $('#phone_code_'+id[1]).val(names[2]); 
     $('#countryname_'+id[1]).val(names[0]); 
    }    
    }); 
    $('#phone_code_'+i).autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_table', 
       row_num : row 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[2], 
         value: code[2], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|"); 
     id_arr = $(this).attr('id'); 
     id = id_arr.split("_");      
     $('#country_no_'+id[1]).val(names[1]); 
     $('#country_code_'+id[1]).val(names[3]); 
     $('#countryname_'+id[1]).val(names[0]); 
    }    
    }); 
    $('#country_no_'+i).autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_table', 
       row_num : row 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[1], 
         value: code[1], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|"); 
     id_arr = $(this).attr('id'); 
     id = id_arr.split("_");      
     $('#country_code_'+id[1]).val(names[3]); 
     $('#phone_code_'+id[1]).val(names[2]); 
     $('#countryname_'+id[1]).val(names[0]); 
    }    
    }); 

    i++; 
}); 

function select_all() { 
    $('input[class=case]:checkbox').each(function(){ 
     if($('input[class=check_all]:checkbox:checked').length == 0){ 
      $(this).prop("checked", false); 
     } else { 
      $(this).prop("checked", true); 
     } 
    }); 
} 

function check(){ 
    obj=$('table tr').find('span'); 
    $.each(obj, function(key, value) { 
     id=value.id; 
     $('#'+id).html(key+1); 
    }); 
} 

$('#countryname_1').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_table', 
       row_num : 1 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[0], 
         value: code[0], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|");       
     $('#country_no_1').val(names[1]); 
     $('#phone_code_1').val(names[2]); 
     $('#country_code_1').val(names[3]); 
    }    
}); 

$('#country_code_1').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_code', 
       row_num : 1 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[3], 
         value: code[3], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|");      
     $('#country_no_1').val(names[1]); 
     $('#phone_code_1').val(names[2]); 
     $('#countryname_1').val(names[0]); 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    }    
}); 

$('#country_no_1').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'country_no', 
       row_num : 1 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[1], 
         value: code[1], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|");      
     $('#country_code_1 ').val(names[3]); 
     $('#phone_code_1').val(names[2]); 
     $('#countryname_1').val(names[0]); 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    }    
}); 

$('#phone_code_1').autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url : 'ajax.php', 
      dataType: "json", 
      method: 'post', 
      data: { 
       name_startsWith: request.term, 
       type: 'phone_code', 
       row_num : 1 
      }, 
      success: function(data) { 
       response($.map(data, function(item) { 
        var code = item.split("|"); 
        return { 
         label: code[2], 
         value: code[2], 
         data : item 
        } 
       })); 
      } 
     }); 
    }, 
    autoFocus: true,    
    minLength: 0, 
    select: function(event, ui) { 
     var names = ui.item.data.split("|");      
     $('#country_code_1 ').val(names[3]); 
     $('#country_no_1 ').val(names[1]); 
     $('#countryname_1').val(names[0]); 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    }    
});

Это мой Аякса файл ajax.php

if($_POST['type'] == 'country_table'){ 
    $row_num = $_POST['row_num']; 
    $name = $_POST['name_startsWith']; 
    $query = "SELECT name, numcode, phonecode, iso3 FROM country where UPPER(name) LIKE '".strtoupper($name)."%'"; 
    $result = mysqli_query($con, $query); 
    $data = array(); 
    while ($row = mysqli_fetch_assoc($result)) { 
     $name = $row['name'].'|'.$row['numcode'].'|'.$row['phonecode'].'|'.$row['iso3'].'|'.$row_num; 
     array_push($data, $name); 
    } 
    echo json_encode($data); 
}

источник

2015-09-14 Anu

Это ** много ** кода. Прочитайте «[* Как создать минимальный, завершенный и проверяемый пример *] (http://stackoverflow.com/help/mcve)» для некоторых советов по сокращению кода в вашем вопросе - в противном случае многие люди будут см. количество кода и перейдите к следующему вопросу. –

Это мой автозаполнения Пример. Пожалуйста, сравните это с вашим кодированием, если сможете. Спасибо ....

Контроллер:

echo json_encode($data);

Вид:

<html> 

        <div class="ui-widget"> 
         <label for="name">Name:</label> <input id="name"> 
        </div> 

<script> 
     $.ajax({ 
      type: 'POST', 
      url: '<?php echo base_url();?>' + 'filter/data', 
      dataType: "json", 
      success: function (data) { 
       var mydata = data; // Replace ... with your JavaScript Object 
       var output = ""; 
       var email = []; 
       for (var key in mydata) { 
        if (mydata.hasOwnProperty(key)) { 
         name.push(mydata[key]["name"]); 
         output += "<tr><td>" + mydata[key]["name"] + "</td>"; 

        } 
       } 
       var nameTags = name; // Array passing into autocomplete 
       var name_change=$("#name").autocomplete({      
        source: nameTags, 
        select:function(event,ui){ 
         $("#name").val(ui.item.value); 
         var name_val=$(this).val(); 
        } 
       }); 
} 
}); 
</script> 
</html>

источник

2015-09-14 11:04:03

Это работает. Как получить несколько значений для этого? – Anu

Вы можете напрямую передать массивы ... Так что просто соедините их или нажмите на них. –

Если я использую это, мне не нужен файл auto.js? – Anu

Определить базовый контроллер первого, такие как индекс, который будет вызывать вид. следующим образом:

class Home extends CI_Controller { 
    function __construct(){ 
     parent::__construct(); 
     $this->load->helper('url'); 
    } 
    function index(){ 
     $data['title']='View_Country'; 
     $this->load->view('view_home',$data); 
    } 
}

Затем необходимо определить вид (View_Country), который будет иметь HTML, а также код Ajax.

Теперь в коде ajax вам нужно будет изменить ссылку php, чтобы вызвать контроллер для извлечения данных. это можно сделать следующим образом:

var controller = 'country'; 
    var base_url = '<?php echo site_url();?>'; 
    url= base_url + controller + '/get_country

В контроллере добавить функцию с тем же именем, что и выше i: e "get_country". Итак, теперь базовый контроллер ура будет следующим:

class Home extends CI_Controller { 
     function __construct(){ 
      parent::__construct(); 
      $this->load->helper('url'); 
     } 

     function index(){ 
      $data['title']='View_Country'; 
      $this->load->view('view_home',$data); 
     } 

     function get_country(){ 
      $this->load->model('get_country'); 
      $data = array(); 
      $data['list'] = $this->get_country->get_country_detail(); 
      $this->load->view('view_country', $data); 

     } 
    }

Используйте этот контроллер для вызова модели, которая будет отображать фактические данные из базы данных. Вашего код ajax.php будет определен в этом model.something, как показано ниже

class get_country extends CI_Model { 
      function __construct(){ 
       parent::__construct(); 
      } 
      public function get_country_detail(){ 
       $search = $this->input->get('term'); 
       if($search == ''){ 
        return array(); 
       } 
       $query=$this->db->query("SELECT name, numcode, phonecode, iso3 FROM country where UPPER(name) LIKE '".strtoupper($name)."%'"); 
       if($query->num_rows() > 0) 
        return $query->result(); 
       else return NULL;      
      } 
     }

После того как данные заселены вы можете вызвать представление для отображения результата.

<?php if(isset($list) && count($list)) : 
      foreach($list as $row) : 
       $name = $row['name'].'|'.$row['numcode'].'|'.$row['phonecode'].'|'.$row['iso3'].'|'.$row_num; 
       array_push($data, $name); 
      endforeach; 
      echo json_encode($data); 
endif; ?>

Я только что предоставил вам обзор того, как это сделать. Вам нужно будет правильно его закодировать и сделать так, как вы хотите

источник

2015-09-14 11:09:49 Gautam

Я действительно понимаю это объяснение.Я сейчас делаю свою страницу просмотра – Anu

Пожалуйста, любезно помогите мне. С моим js-файлом. Должен ли я вызвать функцию контроллера – Anu

Из файла js вызовите контроллер, который, в свою очередь, вызовет модель для извлечения данных. – Gautam

Автоматическое заполнение нескольких текстовых полей

ответ

Смежные вопросы