laravel 如何使用ajax和自动完成功能

n53p2ov0  于 2022-12-01  发布在  其他
关注(0)|答案(1)|浏览(225)

以下自动完成代码有效。

$('#input-personal_name').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: "{{ route('lang.admin.member.members.autocomplete') }}?filter_personal_name=" + encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {        
                response($.map(json, function(item) {
                    return {
                        label: item['personal_name'],     
                        personal_name: item['personal_name'],   
                        customer_id: item['member_id'],
                        telephone: item['telephone'],
                        mobile: item['mobile'],
                        email: item['email'],
                        payment_company: item['payment_company'],
                        payment_tin: item['payment_tin'],
                        shipping_company: item['shipping_company'],
                        shipping_personal_name: item['shipping_personal_name'],
                        shipping_state_id: item['shipping_state_id'],
                        shipping_city_id: item['shipping_city_id'],
                        shipping_address1: item['shipping_address1'],
                    }
                }));
            }
        });
    },
    'select': function(event,ui) {
        $('#input-personal_name').val(event.personal_name);
        $('#input-mobile').val(event.mobile);
        $('#input-telephone').val(event.telephone);
        $('#input-email').val(event.email);
        $('#input-payment_company').val(event.payment_company);
        $('#input-payment_tin').val(event.payment_tin);
        $('#input-shipping_company').val(event.shipping_company);
        $('#input-shipping_personal_name').val(event.shipping_personal_name);
        $('#input-shipping_state_id').val(event.shipping_state_id);
        $('#input-shipping_city_id').val(event.shipping_city_id);
        $('#input-shipping_address1').val(event.shipping_address1);
  }
});

其实只是

$('#input-email').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=abc&filter_email=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['email'],
                        value: item['customer_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {}
});

我从其他项目中复制,并花时间弄清楚。
但是现在我们不仅要搜索personal_name,还要搜索手机、电话、电子邮件。

$('#input-mobile').autocomplete({
   ...
});

$('#input-telephone').autocomplete({
   ...
});

$('#input-email').autocomplete({
   ...
});

自动补全的内容都是一样的,重复的。而且它变得很长。我想把它做成这样:

$('#input-personal_name').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: "{{ route('lang.admin.member.members.autocomplete') }}?filter_personal_name=" + encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {        
                // getMember(json)
                // return getMember(json)
                // return json
                // return item
                // ... ???

            }
        });
    },
    'select': function(event,ui) {
       setMember(event)
  }
});

function getMember(){
    // ???
}

function setMember(event){
    $('#input-personal_name').val(event.personal_name);
    $('#input-mobile').val(event.mobile);
    $('#input-telephone').val(event.telephone);
    $('#input-email').val(event.email);
    $('#input-payment_company').val(event.payment_company);
    $('#input-payment_tin').val(event.payment_tin);
    $('#input-shipping_company').val(event.shipping_company);
    $('#input-shipping_personal_name').val(event.shipping_personal_name);
    $('#input-shipping_state_id').val(event.shipping_state_id);
    $('#input-shipping_city_id').val(event.shipping_city_id);
    $('#input-shipping_address1').val(event.shipping_address1);
}

我的问题是,如何从ajax调用中获取对象,然后在'select'中使用它?

4si2a6ki

4si2a6ki1#

经过一夜的梦,我得到了答案。

成员控制器.php

public function autocomplete()
{
    $json = [];

    if(isset($this->request->filter_personal_name) && mb_strlen($this->request->filter_personal_name, 'utf-8') > 0)
    {
        $filter_data['filter_personal_name'] = $this->request->filter_personal_name;
    }

    if(isset($this->request->filter_mobile) && strlen($this->request->filter_mobile) > 3)
    {
        $filter_data['filter_mobile'] = $this->request->filter_mobile;
    }

    if(isset($this->request->filter_telephone) && strlen($this->request->filter_telephone) > 1)
    {
        $filter_data['filter_telephone'] = $this->request->filter_telephone;
    }

    if(isset($this->request->filter_email) && strlen($this->request->filter_email) > 1)
    {
        $filter_data['filter_email'] = $this->request->filter_email;
    }

    $rows = $this->memberService->getRows($filter_data)->toArray();

    foreach ($rows as $key =>$row) {
        $row['label'] = $row['personal_name'];
        $row['customer_id'] = $row['id'];
        $json[] = $row;
    }

    return response(json_encode($json))->header('Content-Type','application/json');
}

订单表单.blade.php

<input type="text" id="input-personal_name" name="personal_name" value="{{ $order->personal_name }}" list="list-personal_name" >
<datalist id="list-personal_name"></datalist>

<input type="text" id="input-mobile" name="mobile" value="{{ $order->mobile}}" list="list-mobile" >
<datalist id="list-mobile"></datalist>

<input type="text" id="input-telephone" name="telephone" value="{{ $order->telephone}}" list="list-telephone" >
<datalist id="list-telephone"></datalist>

<input type="text" id="input-email" name="email" value="{{ $order->email}}" list="list-email" >
<datalist id="list-email"></datalist>
...
<script type="text/javascript"><!--
function setOrder(item)
{
  $('#input-personal_name').val(item.personal_name);
  $('#input-customer_id').val(item.customer_id);
  $('#input-telephone').val(item.telephone);
  $('#input-mobile').val(item.mobile);
  $('#input-email').val(item.email);
  $('#input-payment_company').val(item.payment_company);
  $('#input-payment_tin').val(item.payment_tin);  
  $('#input-shipping_company').val(item.shipping_company);
  $('#input-shipping_personal_name').val(item.shipping_personal_name);
  $("#input-shipping_address1").val(item.shipping_address1);
  $("#input-shipping_city_id").val(item.shipping_city_id);
  $("#input-shipping_state_id").val(item.shipping_state_id);
}

$('#input-personal_name').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: "{{ route('lang.admin.member.members.autocomplete') }}?filter_personal_name=" + encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {        
                response(json);
            }
        });
    },
    'select': function(event,ui) {
        setOrder(event)
  }
});

$('#input-mobile').autocomplete({
    ... //same code with personal_name
});

$('#input-telephone').autocomplete({
    ... //same code with personal_name
});

$('#input-email').autocomplete({
    ... //same code with personal_name
});

--></script>

1.互联网上的所有示例代码在自动完成“源代码”中都有“标签”和“值”,但只需要标签。
1.由于需要标签,我们在控制器的foreach中制作了标签
1.然后我们直接使用response(json),不需要map()。

相关问题