I have three input box
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]"/>
I need to search with three ajax link
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"}]
The main point i want to know how to change the path for json name when i click email or phone or 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();
}
});
you can try this:
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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.