php - 自动完成多个文本框值-6ren

php - 自动完成多个文本框值

转载作者：太空宇宙更新时间：2023-11-03 11:56:04

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

最佳答案

首先定义一个基本 Controller ，例如将调用 View 的索引。如下:

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 (View_Country)，它将包含 html 和 ajax 代码。

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

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

在 Controller 中添加一个与上面同名的函数，即“get_country”。所以现在你的基本 Controller 将如下所示:

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

        }
    }

使用此 Controller 调用一个模型，该模型将从数据库中获取实际数据。您的 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;                     
            }
        }

填充数据后，您可以调用 View 来显示结果。

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

我刚刚向您概述了如何进行。您必须正确编码并按照您想要的方式完成它

关于php - 自动完成多个文本框值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32562154/

文章推荐： python - 无法将 elasticsearch 查询转换为 pyes

文章推荐： C# 日期 - 数据库、显示和本地化

文章推荐： python - 与 distutils/pip 一起安装 Bash completion

javascript - 将数据从应用程序组件[文本框]传递到网站组件[文本框]
我正在为一个网站开发应用程序(我无法访问该网站)。所以我想做以下事情: 那么如何将文本数据从 Android View 传递到网页中的文本框并捕获来自网站的响应？我试图记住这一切我无法访问任何网站
Silverlight 文本框
我有一个文本框，里面有一个很长的 url。我想做的是，当用户点击主页按钮时，我希望光标移动到文本框的开头。我希望这是正常行为，但事实并非如此，当文本框内的文本很长时，我点击回家，它会转到文本框中当前
带有图像的 WPF 文本框
我正在做一个WPF登录界面。在我的登录面板中，我有一个登录 TextBox和 PasswordBox .如下图第一张所示，登录文本框中有一个小人类标志，密码框中有一个锁。我将图像设置为文本框背景，然后
wpf - 文本框 - 水平文本居中
是否有任何简单的方法可以使文本在文本框中居中？我正在寻找一些内置函数，但什么也没找到。最佳答案将 TextAlignment 属性设置为 Center: 关于wpf - 文本框 - 水平文本居中
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
java - Android 文本框
我想将纬度和经度的值返回到我的 EditText 中，我已经能够使用 Toast 来做到这一点，但没有通过实现它>编辑文本。请帮忙 // EditText latEditText =
Jquery Iframe 文本框
我是Jquery新手，其实我对JQuery的使用知识是0。我正在尝试使用 JQuery 来实现某些功能。我有一个带有 iframe 的 html 页面。 iframe 页面中有一个表单和一个文本框。
c# - 在动态创建的事件处理程序中访问动态创建的控件(文本框)
我正在尝试在 Button 的事件处理程序中访问我在 C# 中动态创建的 TextBox。 void MainFormLoad(object sender, EventArgs e)
javascript - 文本框 -> 立即开始输入而不是单击文本框
我有一个搜索栏，当我打开搜索栏时，我想立即开始输入，不想点击文本框。我尝试使用 myTextBoxId.click()(因为当您单击它时，您可以开始输入)但它不起作用。最佳答案你必须 docum
Javascript 文本框 "Scrubber"
我还没有找到好的解决方案:我有一个文本框，用户需要能够在其中输入特定信息。例如，命令可能是“9030 OUT FU [1234 TEST]”。我需要“擦洗”这个文本框以确保数据是以这种格式输入的(不
Java 文本框 - 将字节转换为字符串
我有一个 Java 应用程序，您可以在其中将字符串输入文本框，点击加密，它会在单独的文本框中显示加密的字符串。我将为此使用 AES 加密。问题是我无法让加密文本按字节显示，但文本框不会显示字节(仅采用
html - 文本框，将文本带到文本框中的下一行
我已经浏览了您庞大的问题数据库，但似乎没有找到答案。我在将文本换行时遇到问题 - 即使之前的行上仍有空间。这是代码: p1 { border-left: 6px solid blue; bac
javascript - 如何触发按钮打开用户输入/文本框
所以我正在尝试创建“看板/待办事项列表”网站，但我在触发添加按钮时遇到了问题。我试图触发“添加”按钮以打开用户输入框。所以我有这个创建一个小框的“添加”按钮。但我无法弄清楚如何在该框中添加一个小区域，
javascript - JavaScript 文本框
我有一个文本框，应该只接受浮点值。它不应该允许任何其他值。怎么做。我在 HTML 中完成了此操作。 Weight 但是，它不起作用？如何做到这一点。最佳答案 // remo
javascript - 文本框 - 如何不显示已填充的值
当用户点击文本框时，如何不显示出现在文本框下方的已填充值最佳答案将这个属性放在你的文本框中 autocomplete="off" 关于javascript - 文本框 - 如何不显示已填充的值，我
javascript - flex 文本框
JavaScript: function resize(elem){ if(!elem.value.length) elem.size=1; else elem.size=elem.value
带有两个按钮的 HTML 文本框
在我的代码下面，我需要它具有相同的宽度和高度，但有多行“从第一行开始”，当到达行尾时转到新行，只有 120 个字符，就像我用“Enter短信”当您向右单击时隐藏，但我需要它为灰色。最佳答案您可以使
C#、文本框、.NET
我有一个问题，我必须创建一种方法来搜索显示在多个文本框 (lblResult.Text) 中的选定文本文件的内容。使用简单的搜索算法:搜索用户输入的整个搜索词。例如，如果用户输入“hello”，则只搜
c# - 文本框.SelectionStart
我正在尝试对文本框使用 SelectionStart 和 SelectionLength 属性。它没有效果，但也没有错误。它实际上是后台工作程序 ProgressChanged 方法的一部分，但我已经

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 自动完成多个文本框值