堆栈内存溢出
  繁体   English   中英

自动完成多个文本框值

[英]Auto complete multiple text-box values

 原文  2015-09-14 10:07:59  9   2    php/ mysql/ codeigniter

问题描述

我是Codeigniter的新手。 我需要执行自动完成多个文本框值，我在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文件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);
}

2 个解决方案

解决方案1
 3  2015-09-14 11:09:49

首先定义一个基本控制器，例如将调用视图的索引。 如下： 

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

然后，您需要定义一个将包含html和ajax代码的view（View_Country）。

现在，在ajax代码中，您将必须修改php链接以调用控制器来获取数据。 这可以按如下方式完成 

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

在控制器中，添加一个具有与上面相同名称的函数，即“ 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代码将在此模型中定义。如下所示 

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

我刚刚为您提供了有关操作方法的概述。 您将必须对其进行正确编码，并按所需方式完成它

解决方案2
 0  2015-09-14 11:04:03

这是我的自动完成示例。 如果可以的话，请与您的编码进行比较。 谢谢....

控制器： 

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 数组多值文本框 中间使用逗号分隔符在文本框中搜索多个键 自动完成搜索框，从结果中选择多个值 在php和mysql中自动完成文本框 将文本框值存储在数组中 将文本框值传递给另一页 自动完成值应基于在另一个文本框中选择的值出现 如何将值放在使用CodeIgniter中的AJAX从数据库中获取的文本框中？ 文本框中的文本自动完成 [图片附在里面] 具有不同值的多个自动完成字段
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM