using jquery-ui autocomplete with multiple input fields

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

Gwenc37 · Accepted Answer · 2018-11-14 14:51:43Z

13

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

edited Nov 14, 2018 at 14:51

Gwenc37

2,0467 gold badges19 silver badges22 bronze badges

answered Jul 9, 2014 at 14:52

j809

1,4991 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gerard13007 Over a year ago

in fact, the dropdown list for autocomplete worked fine... my problem is "how to recup the selected items"... sorry for the incorrect expression of my needs

j809 Over a year ago

You should write an according question for that. You should tell us where exactly you face problem, even if is very minute. So please make it clear what do you want to do with selected item. Also, there are syntax errors in your code. If its not a typo then correct it first.

Gerard13007 Over a year ago

i apologize for late comeback... following your advice to correct my code made the stuff working like a charm. Thanks a lot. Do you think useful to publish the working code and comments ? And if it is, what is the way to do it (i am a stackoverflow neebie)

j809 Over a year ago

Generally if you get the answer to any problems for your question, it is a general way to answer your own question and mark it as accepted answer. Since you had syntax errors in your code, I am adding that code here itself and if you want you can mark it as accepted or create your own correct answer. This will help any other future readers to follow solution in this post.

userDEV Over a year ago

@j809 I love the class definition. I got that to work. I want to add a selection statement to find out which one of my fields is calling the autocomplete jquery function. How would I do so?

Collectives™ on Stack Overflow

using jquery-ui autocomplete with multiple input fields

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related