good afternoon all!
i spared a lot of time, read all posts on stackoverflow... and i am not able to make autocomplete working with multilpe input fields. I tried to attrib a 'autoc' class to each input, i use a different id for each field (in fact the inedx of the php loop generating fields). I do not ask someone to do the job for me.... just a working example.
Thanks in advance.
PS : I apologize for my poor english...
now follows a piece of html :
<input id="search_ctO" class="autoc" type="text" name="search_ct[]">
<input id="search_ct1" class="autoc" type="text" name="search_ct[]">
<input id="search_ct2" class="autoc" type="text" name="search_ct[]">
....
<input id="search_ctn" class="autoc" type="text" name="search_ct[]">
and jquery :
$('.autoc').on("focus", function()
$(this).autocomplete({
minLength: 2,
source: 'liste_contact.php',
select: function( event, ui ) {
$('.autoc #search_ct').val( ui.item.label ); //id="search_ct'.$i.'
$(".autoc #contact_id").val( ui.item.value ); //
$("autoc #contact_description").val( ui.item.desc );
return false;
},
change: function(){
var servi = $("#service_id").val();
var hop = $('#hop').val();
var contact = $("#contact_id" ).val();
$.ajax({
url: 'ajout_contact.php',
data: "serv="+ servi+"&hopit=" + hop+"&contact="+ contact+"",// on envoie la requete d'ajout de contact
success: function() {
$("#search_ct").val('');
// location.reload(true);
}
Without knowing the exact HTML and the object array passed to autocomplete
source, it is difficult to make your code exactly.
However, you have asked about working of autocomplete
for multiple fields, so here is just a simple example:
HTML
<input id="search_ctO" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct1" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct2" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ctn" class="autoc" type="text" name="search_ct[]"/>
JS
var tags = ["abc","def","xyz"];
$('.autoc').on("focus", function(){
$(this).autocomplete({
minLength: 2,
source: tags
});
});
JSFIDDLE DEMO
If there is any other thing you want to be included in answer, feel free to comment.
EDIT
Your code,
$('.autoc').on("focus", function() {
$(this).autocomplete({
minLength: 2,
source: 'liste_contact.php',
select: function( event, ui ) {
$('.autoc #search_ct').val( ui.item.label );
$(".autoc #contact_id").val( ui.item.value );
$(".autoc #contact_description").val( ui.item.desc );
return false;
},
change: function() {
var servi = $("#service_id").val();
var hop = $('#hop').val();
var contact = $("#contact_id" ).val();
$.ajax({
url: 'ajout_contact.php',
data: "serv="+servi+"&hopit="+hop+"&contact="+contact+"",
success: function() {
$("#search_ct").val('');
}
});
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With