jQuery自动补全与getJSON搜索多输入

jQuery Autocomplete with getJSON search on multiple input

本文关键字：getJSON 搜索 输入 jQuery      更新时间：2023-09-26

我有三个输入框

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

你可以试试:

 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();
      }
    });
相关文章：