使用带有多个输入字段的 jquery-ui 自动完成功能

Question

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

Answer 1

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