Javascript jQuery在多输入上使用getJSON搜索自动完成

我有三个输入框

HTML:

JSON:

我想知道的要点是，当我单击email、phone或name时，如何更改json name的路径

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();
}
});

您可以尝试以下方法：

 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();
      }
    });

---

抱歉，兄弟，我需要将路径名\u全文更改为电子邮件\u，就像我单击电子邮件输入框并搜索时一样。Thanksvar inpuClicked=$（this.attr（'class'）；是未定义的，您可以将此行置于自动完成之外。试试这个：var inputClicked$（'.customer\u name、.customer\u email、.customer\u phone'）。on（'click'，function（）{inputClicked=$（this.attr（'class'）；}）；

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

$('.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();
}
});

 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();
      }
    });