堆栈内存溢出
  简体   繁体   English

选择下拉列表中的值时，如何完成自动填充？

[英]How to do autocomplete when a value from dropdown is selected?

 原文  2015-09-24 06:28:46  2   1    javascript/ jquery/ ajax/ codeigniter

问题描述

Hi I am using codeigniter framework. 嗨，我正在使用codeigniter框架。 I have a auto fill code like when I enter a id in a text box it retrieves a value from database and fills the remaining text box automatically. 我有一个自动填充代码，例如当我在文本框中输入ID时，它会从数据库中检索一个值并自动填充剩余的文本框。 When I type the full id and click somewhere I made to auto-fill with the help of ajax. 当我输入完整ID并单击某个位置时，我将借助Ajax自动填充。 Now when I select some data from the related data drop down I need to auto fill them. 现在，当我从相关数据下拉列表中选择一些数据时，我需要自动填充它们。 How to do this? 这个怎么做？ Can someone help me code? 有人可以帮我编码吗？ Here is my code where I am got struck. 这是我被打动的代码。

My controller function 我的控制器功能 

<?php
class Admin_billing extends CI_Controller {

    public function __construct()
    {
        parent::__construct();

        $this->load->model('billing_model');
        $this->load->model('client_model');
        $this->load->model('employee_model');
        $this->load->model('products_model');
        $this->load->model('package_model');
        if(!$this->session->userdata('is_logged_in')){
            redirect('admin/login');
        }
    }

        public function ticket($id)
    {

        $id=$this->uri->segment(4);

        $data['id']=$this->uri->segment(4);

        $data['main_content'] = 'admin/billing/ticket_page';
        $this->load->view('includes/template', $data);  
     }

     public function getdetails()
     {  
        $data_to_search=$_POST['val'];
        $details=array();

        $details['description']=$this->billing_model->get_service_name($data_to_search);
        $details['type']=$this->billing_model->get_service_name($data_to_search);
        $details['cost']=$this->billing_model->get_service_name($data_to_search);
        $details['qty_prch'] = 1;
        $details['qty_used'] = 1;
        $details['price']=$this->billing_model->get_service_pricevalue($data_to_search);
        echo json_encode($details);
     }



}?>

This is my controller page admin_billing.php . 这是我的控制器页面admin_billing.php 。 Here I have a getdetails() that is called when I enter some value in the text box and click somewhere. 在这里，我有一个getdetails() ，当我在文本框中输入一些值并单击某个位置时会调用它。 When I click somewhere or press tab the value is posted from view to this function with help of ajax. 当我单击某处或按Tab键时，借助ajax，值将从视图中发布到此功能。

This is my model page. 这是我的模型页面。 

<?php
class billing_model extends CI_Model {

    public function __construct()
    {
        $this->load->database();

    }
    public function get_service_name($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['name'];
}

    public function get_service_pricevalue($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['price']; 
}

    public function get_service_mins($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['mins']; 
}
    public function get_service_price($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['price']; 
}
    public function get_service_id($id)
{
    $this->db->select('*');
    $this->db->from('service');
    $this->db->where('id', $id);
    $query = $this->db->get();
    $result = $query->result_array();
    return $result[0]['id']; 
}

}
?>

Here in this model page, billing_model.php I have few function which retrieves the value from database. 在此模型页面中的billing_model.php中，我只有几个函数可以从数据库中检索值。 Here I get the id from the controller search for it and get the related content with the help of id. 在这里，我从控制器搜索中获取ID，并在ID的帮助下获取相关内容。

Here is my view page. 这是我的查看页面。

I have a function that when onchange action happens get the value from my textbox with name pid[] and calls a ajax function getvalues() I have another function BindControls() for auto-complete action. 我有一个函数，当发生onchange操作时，从名称为pid[]文本框中获取值，并调用ajax函数getvalues()我有另一个函数BindControls()用于自动完成操作。 When I select some value again I need to pass that value to the ajax function getvalues() 当我再次选择某个值时，我需要将该值传递给ajax函数getvalues() 

<html>

<head>

  <link href="<?php echo base_url(); ?>assets/css/demo.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-compat-git.js'></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>


<script type='text/javascript'>
var baseurl='<?php echo base_url(); ?>';
$(function() {
    $('#test').on('change', 'input[name="pid[]"]', function() {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(this.value, indexOfTheChangedRow);
    });
});


function get_values(val,rowIndex)
{
 $.ajax({
    url: baseurl + 'admin/billing/getdetails',
    type: 'post',
    data: {
        val: val
    },
    success: function (indexOfTheChangedRow, response) {
        if (response != "") {
            var json = jQuery.parseJSON(response),
                rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");

            // add the changed row as the context to restrict the search for the classes to this one row only
            $('.description', rowToUpdate).val(json.description);
            $('.type', rowToUpdate).val(json.type);
            $('.qty_used', rowToUpdate).val(json.qty_used);
             $('.qty_prch', rowToUpdate).val(json.qty_prch);
             $('.price', rowToUpdate).val(json.price);

        }
    }.bind(window, rowIndex),
    error: function (response) {
        alert("error");
    }
});
}

function displayResult() {
<?php

      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
    $dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');

      ?>

    var complex = <?php echo json_encode($dropdown); ?>;

    var row = document.getElementById("test").insertRow(-1);
    row.innerHTML = '<td><div>'+complex+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td class="qty_prch"><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td class="price"><input type="text" class="price" value="" style="width:70px;"/></td><td><input type="text" value="" class="discount" style="width:70px;"/></td><td><input type="text" value="" class="tax" style="width:70px;"/></td><td class="total"><input type="text" value="" class="total" style="width:70px;"/></td>';
}
</script>
<script>
$(document).ready(function () {
    $('#test').on('mousemove', 'input', sumtotal);
    function sumtotal() {
        var hour = 0;
        var rate = 0;
        var total = 0;
        var subtotal = 0;
        $('#test tbody tr').each(function () {
            hour =  parseNumber($(this).find('.price input').val()); 
            rate = parseNumber($(this).find('.qty_prch input').val());
            subtotal = (hour * rate);
            $(this).find('.total input').val(subtotal);
            total += subtotal;
        });
        $('.Grandtotal input').val(total);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});
$(document).ready(function() {
            BindControls();
        });

        function BindControls() {
            var Countries = ['ARGENTINA', 
                'AUSTRALIA', 
                'BRAZIL', 
                'BELARUS', 
                'BHUTAN',
                'CHILE', 
                'CAMBODIA', 
                'CANADA', 
                'CHILE', 
                'DENMARK', 
                'DOMINICA'];

            $('#pid').autocomplete({
                source: Countries,
                autoFocus: true,
                minLength: 0,
                scroll: true
            }).focus(function() {
                $(this).autocomplete("search", "");
            });
        }

</script>

</head>

                <?php

      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['first_name']] = $row['first_name'];
      }
 echo form_open('admin/billing/ticket_page');
      ?>
            <table id="test">
            <thead>
            <tr>
            <td style="width:80px;">employee</td>
            <td style="width:35px;">start time</td>
            <td style="width:35px;">id</td>
            <td style="width:145px;">Description</td>
            <td style="width:45px;">Type</td>
            <td style="width:45px;">Qty prch</td>
            <td style="width:45px;">Qty used</td>
            <td style="width:70px;">Price</td>
            <td style="width:70px;">discount</td>
            <td style="width:70px;">Tax</td>
            <td style="width:70px;">Total</td>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td><?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?></td>
            <td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
            <td><input type="text" name="pid[]" id="pid" value="" style="width:35px;"/></td>
            <td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
            <td><input type="text" name="type[]" class="type" style="width:45px;"/></td>
            <td class="qty_prch"><input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;"/></td>
            <td><input type="text" name="qty_used[]" class="qty_used" style="width:45px;"/></td>
            <td class="price"><input type="text" name="price[]" class="price" style="width:70px;"/></td>
            <td><input type="text" name="discount[]" class="discount" style="width:70px;"/></td>
            <td><input type="text" name="tax[]" class="tax" style="width:70px;"/></td>
            <td class="total"><input type="text" name="total[]" class="total" style="width:70px;"/></td>

            </tr>
            </tbody>



            </table>

            <div id="add_row">
        <button type="button" onClick="displayResult()" class="add_r"></button>
                </div>

            <?php echo form_close(); ?>  

             <div id="last_button">
        <input type="button" class="Delete"/>
            <input type="button" class="Edit"/>

  <script src="<?php echo base_url(); ?>assets/js/function.js"></script>

</body>
</html>

Can someone help me code? 有人可以帮我编码吗？ Please give me some solutions. 请给我一些解决方案。

1 个解决方案

解决方案1
 0  2015-09-24 08:45:09

When you add a row, the .on('autocompleteselection'... only works on existing html and not anything generated. You need to add delegation, so go from: 当您添加一行时， .on('autocompleteselection'...仅适用于现有的html而不适用于生成的任何内容。您需要添加委派，因此，请转到： 

$(document).ready(function () {

    $('#pid').on('autocompleteselect', function (e, ui) {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(ui.item.value, indexOfTheChangedRow);
    });
});

to 至 

$(document).ready(function () {

    $('#pid').on('autocompleteselect', 'tr',function (e, ui) {
        var indexOfTheChangedRow = $(this).closest("tr").index();
        get_values(ui.item.value, indexOfTheChangedRow);
    });
});

That way you are delegating the .on to also include table rows added later 这样，您将委派.on来包括以后添加的表行

暂无
暂无

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

相关问题 在自动完成下拉列表中获取选定的值 - Get selected value in autocomplete dropdown 从下拉菜单中选择银行时，如何回显值（价格）？ - How do I echo a value (a price) when a bank is selected from a dropdown menu? 从下拉列表中选择路径元素的值时，如何更改其颜色 - How do I change color of path element when its value is selected from dropdown 当大于1时，如何从表的下拉列表中选择值？ - How to get selected value from dropdown in a table when there is more then 1? 选择下拉菜单中的特定值时发出警报 - Alert when a particular value from dropdown is selected 从下拉列表中选择值时触发AJAX - Fire AJAX when value selected from dropdown Primefaces自动完成功能保留选定的下拉值 - Primefaces autocomplete keep selected dropdown value 从“自动完成”下拉选项中选择“材质自动完成角停止Api调用” - Material Autocomplete Angular Stopping Api Call when Selected From the Autocomplete Dropdown options AjaxControlToolkit自动完成：如何自动使用值并在选择值时执行某些操作 - AjaxControlToolkit Autocomplete: How to use values automatically and do something when a value is selected 从另一个下拉菜单中选择一个值时，禁用整个下拉菜单 - Disable an entire dropdown when a value is selected from another dropdown
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM