Question

这是controller.php

 <?php
class Autocomplete extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('datacomplete');
    }
    public function index($id)
    {
        echo $id;
        $this->load->view('view_demo', $data);
    }
    public function GetCountryName()
    {
        $keyword = $this->input->post('keyword');
        $data    = $this->datacomplete->GetRow($keyword);
        echo json_encode($data);
    }
}
?>

这是一个模型

<?php
class Datacomplete extends CI_Model
{

    public function GetRow($keyword)
    {
        $this->db->order_by('id', 'DESC');
        $this->db->like("name", $keyword);

        return $this->db->get('autocomplete')->result_array();
    }

}

这是view.php

<!DOCTYPE html>
<html>

<head>
    <!-- Latest compiled and minified CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
    </script>
    <script src="<?php echo base_url(); ?>assets/custom.js">
    </script>
    </link>
</head>

<body style="background-color: #000000;">
    <?php echo $id= 1; ?>
    <form action="<?php echo base_url('autocomplete/index/' .$id); ?>" method="post">
        <div class="row">
            <center>
                <h2 style="color: #fff;">
                    AUTOCOMPLETE FORM FROM DATABASE USING CODEIGNITER AND AJAX
                </h2>
            </center>
            <div class="col-md-4 col-md-offset-4" style="margin-top: 200px;">
                <label class="control-lable" style="color: #fff;">
                    Country Name
                </label>
                <input autocomplete="off" class="form-control" id="country" name="country" placeholder="Type to get an Ajax call of Countries" style="height:70px" type="text">
                <ul aria-labelledby="dropdownMenu" class="dropdown-menu txtcountry" id="DropdownCountry" role="menu" style="margin-left:15px;margin-right:0px;">
                </ul>
                <input type="submit">
                </input>
                </input>
            </div>
        </div>
    </form>
</body>

</html>

这是custom.js文件

$(document).ready(function() {
    $("#country").keyup(function() {
        $.ajax({
            type: "POST",
            url: "http://localhost/codeajax/autocomplete/GetCountryName",
            data: {
                keyword: $("#country").val()
            },
            dataType: "json",
            success: function(data) {
                if (data.length > 0) {
                    $('#DropdownCountry').empty();
                    $('#country').attr("data-toggle", "dropdown");
                    $('#DropdownCountry').dropdown('toggle');
                } else if (data.length == 0) {
                    $('#country').attr("data-toggle", "");
                }
                $.each(data, function(key, value) {
                    if (data.length >= 0)
                        $('#DropdownCountry').append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" class="dropdownlivalue">' + value['name'] + '</a></li>');
                });
            }
        });
    });
    $('ul.txtcountry').on('click', 'li a', function() {
        $('#country').val($(this).text());
    });
});

我想在单击“提交”按钮后在URL中动态获取国家/地区的ID。现在我使用静态传递ID作为1。该表具有两个列ID和国家/地区名称。单击提交按钮时如何将id动态传递给url。我无法从数据库动态获取ID，即当我单击Submit时应重定向到具有国家ID的新页面，或在新页面中回显$ id以及应显示我国家ID的URL

Answer 1

您可以使用javascript来实现。

首先更改表格：

<form action="<?php echo base_url('autocomplete/index/' .$id); ?>" method="post">

收件人：

<form method="post" id="countryForm">

然后更改提交按钮：

<input type="submit">

收件人：

<input type="submit" id="submitForm" disabled>

然后应用以下javascript代码：

$(document).ready(function() {
    $("#country").keyup(function() {
        $.ajax({
            type: "POST",
            url: "http://localhost/codeajax/autocomplete/GetCountryName",
            data: {
                keyword: $("#country").val()
            },
            dataType: "json",
            success: function(data) {
                if (data.length > 0) {
                    $('#DropdownCountry').empty();
                    $('#country').attr("data-toggle", "dropdown");
                    $('#DropdownCountry').dropdown('toggle');
                } else if (data.length == 0) {
                    $('#country').attr("data-toggle", "");
                }
                // Assign each country id into each country list `data-` element
                $.each(data, function(key, value) {
                    if (data.length >= 0)
                        $('#DropdownCountry').append('<li role="displayCountries" ><a role="menuitem dropdownCountryli" data-countryid="' + value['id'] + '" class="dropdownlivalue">' + value['name'] + '</a></li>');
                });
            }
        });
    });
    $('ul.txtcountry').on('click', 'li a', function() {
        $('#country').val($(this).text());
        $('#countryForm').attr('action', '<?php echo base_url('autocomplete/index/'); ?>' + $(this).data('countryid'); // set new form action which contain country id
        $('#submitForm').removeAttr('disabled'); // enable the submit button after one country is selected
    });
});

单击提交按钮或搜索按钮后，在URL中动态获取国家/地区的ID

1 个答案: