javascript - jQuery 自动完成与多个输入上的 getJSON 搜索

Question

我有三个输入框

HTML:

Name<input type="text" class="customer_name" name="order[contact][first_name]"/><br/>
Email<input type="text" class="customer_email" name="order[contact][email]"/><br/>
Phone<input type="text" class="customer_phone" name="order[contact][phone]"/>

我需要使用三个ajax链接进行搜索

http://localhost:8000/api/users?name_fulltext=user
http://localhost:8000/api/users?email_like=1234
http://localhost:8000/api/users?phone_like=buyer

JSON:

[{"id":"-1","name":"Test User","phone":"1234567","email":"buyer@web.com"}]

要点我想知道当我单击电子邮件或电话或名称时如何更改 json 名称的路径

jQuery:

$('.customer_name, .customer_email, .customer_phone').autocomplete({
source: function( request ,response){
    $.getJSON("/api/users?"+ "name_fulltext=" + request.term , function (data){
        response($.map(data,function(opt){
            return {
                label : opt.name,
                value : opt.name,
            }
        }))
    })
},
minLength: 3,
select: function(event, ui) {
    $('.customer_name').data(ui.item.value);
    $('.customer_name').val(ui.item.label);
    $('.customer_email').data(ui.item.email_value);
    $('.customer_email').val(ui.item.email_label);
    $('.customer_phone').data(ui.item.phone_value);
    $('.customer_phone').val(ui.item.phone_label);
    name_length = $('.ui-autocomplete > li').length;
    event.preventDefault();
}
});

Answer 1

你可以试试这个:

 var inputClicked;
 $('.customer_name, .customer_email, .customer_phone').on('click', function(){
     inputClicked = $(this).attr('class');
 });

 $('.customer_name, .customer_email, .customer_phone').autocomplete({
        source: function( request ,response){

          var myUrl = "/api/users?";
          if(inputClicked =="customer_name") {
               myUrl = myUrl + "name_fulltext=" + request.term;
          } else if(inputClicked == "customer_email"){
               myUrl = myUrl + "email_like=" + request.term;
          } else {
               myUrl = myUrl + "phone_like=" + request.term;
          }

          $.getJSON(myUrl , function (data){
             response($.map(data,function(opt){
                return {
                    label : opt.name,
                    value : opt.name,
                }
            }))
        })
      },
      minLength: 3,
      select: function(event, ui) {
        $('.customer_name').data(ui.item.value);
        $('.customer_name').val(ui.item.label);
        $('.customer_email').data(ui.item.email_value);
        $('.customer_email').val(ui.item.email_label);
        $('.customer_phone').data(ui.item.phone_value);
        $('.customer_phone').val(ui.item.phone_label);
        name_length = $('.ui-autocomplete > li').length;
        event.preventDefault();
      }
    });