从自动完成建议中选择值后，根据所选值填写其余字段

Question

所以我的一个视图中有一个自动完成功能，它可以正常工作，现在我想添加一个功能，用户可以在其中搜索一些关键字中的产品文字，找到并选择它，当产品名称是selected 我想为该产品动态填写价格，信息在数据库中，我该如何实现？

我的 JQuery 用于自动完成

$(function(){
    var controller_path = document.getElementById("get_controller_path").value;
    $("#product").autocomplete({
        source: controller_path
    });
});

我希望在选择自动完成建议时动态弹出价格的视图：

<td><input type="text" id="product" name="prodname"></td>
<input type="hidden" id="get_controller_path" value="<?echo base_url().'admin_site_offers_ctrl/get_product';?>">
<td><input style="width: 60px" type="text" name="price" id="price"></td>

自动完成控制器

  public function get_product(){
    $this->load->model('offers_for_clients_model');
    if (isset($_GET['term'])){
        $q = strtolower($_GET['term']);
        $this->offers_for_clients_model->get_product($q);
    }
}

该自动完成功能的模型：

function get_product($q){
    $this->db->select('*');
    $this->db->like('nosauk_lv', $q);
    $query = $this->db->get('produkti');
    if($query->num_rows > 0){
        foreach ($query->result_array() as $row){
            $row_set[] = htmlspecialchars_decode(stripslashes($row['nosauk_lv'])); //build an array
        }
        echo json_encode($row_set); //format the array into json data
    }
}

我应该如何处理这个问题？任何指向正确方向的指针都会很棒！谢谢！ P.S 自动完成功能正常，不用担心。

Answer 1

你可以这样试试

    $("#product").autocomplete({
            source: function( request, response ) {
                    $.ajax({
                        url: customurl,
                        data: {term: request.term},
                        dataType: "json",
                        success: function( data ) {
                            response( $.map( data, function( item ) {
                               // you can set the label value
                          return {
                                label: item.value,
                                value: item.value,
                            }
                           }
                        }));
                     }
                 });
           },
        select: function( event, ui ) 
            {
        // Here again you can call ajax function to get the product price
        var prodname=$('#prodname').val(ui.prodid);
        getproductprice(prodname);
            },
         change: function( event, ui )
          {
            var prodname=$('#prodname').val(ui.prodid);
            getproductprice(prodname);
          }
        });

请确保在您的模型中也在 $row_set[] 中获取产品 ID。

在html中这样声明

<input type="hidden" name="prodname" id="prodname"> // Here you will get product name id after select the productname

在getproductprice函数中可以调用ajax函数获取价格

function getproductprice(prodname)
{
    if(prodname>0)
    {
        $.ajax({
           url:customurl,
           data: "prodid="+prodname,
           dataType: "json",
           success: function( data ) {
             $('#price').val(data['price']); // whatever your varaible
           }

         });

     }
}

我认为这将有助于解决您的问题。谢谢

Answer 2

很抱歉回复晚了，这对我有用，最终是这样做的：

 $(function(){
    var controller_path = document.getElementById("get_controller_path").value;
    $("#product").autocomplete({
        source: controller_path, // ceļš uz kontrolieri kur atrodas metode, admin_site_offers_ctrl
        select: function(a,b){
            $(this).val(b.item.value); //grabed the selected value
            getProductsOtherInfo(b.item.value);//passed that selected value
        }
    });
});

其他功能根据所选值名称向数据库发出请求并将它们加载到我需要的适当字段中，如下所示：

function getProductsOtherInfo(name){
var site_url = document.getElementById('get_products_other_info').value;
/*alert(site_url);*/
        $.post(site_url, {
            name : name,
            site_url : site_url
        },

        function(rawdata){
            var myObject = JSON.parse(rawdata);
            $('#cena_pirms_atl').val(myObject[0].cena_ls);
            $('#iepcena').html(myObject[0].ped_ien_ls);
            $('#nom_id').val(myObject[0].ID);
            getPZtotals();
        });
    }

控制器：

function get_products_other_info(){
    $this->load->model('offers_for_clients_model');
    $name = trim($_POST['name']);

    $data['products_other_info'] = $this->offers_for_clients_model->get_products_other_info($name);
    echo json_encode($data['products_other_info']);
}

型号：

function get_products_other_info($name){
    $decode_name = htmlspecialchars(stripslashes($name));
    $query = $this->db->where('nosauk_lv', $decode_name)->get('produkti')->result();
    return $query;
}

查看：

  <input type="hidden" name="nom_id" id="nom_id">
  <td><input style="width: 60px" type="text" name="cena_pirms_atl"  id="cena_pirms_atl"></td>
  <td id="iepirkcens"><span id="iepcena"></span></td>

从自动完成建议中选择值后，根据所选值填写其余字段

After selecting value from autocomplete suggestions, fill in the rest of the fields based on the selected value

php

jquery

codeigniter

autocomplete