jquery autocomplete with input arrays

Question

I'm sorry to bother you but i've checked and tried several results from google without being able to make my little idea to work, the thing is that i have the following autocomplete script, which is running fine if i just use it in one input at the time, however i got inputs arrays so whenever i choose somenting in from the autocomplete input it changes all the other inputs with the same name, could anyone guide me in the right direction?

My inputs look something like this

<input type="hidden" name="origin-zone[]">
<input type="text" name="origin[]" class="form-control boxed origin uppercase" required="required" autocomplete="off">

And my script like this:

$(document).on('keydown', function() {
  var zone = $("input[name='origin-zone[]']").each(function(){
    return $(this).val(ui.item.id)
  });

  var origin = $("input[name='origin[]']").each(function(){
    return $(this).val(ui.item.value)
  });

  $('.origin').autocomplete({
    source: "php/hotel.php",
    minLength: 1,
    select: function(event, ui) {
      zone,
      origin
    }
  });
  $( ".origin" ).autocomplete( "option", "appendTo", ".eventInsForm" );
});

Thanks in advance!

Answer 1

Within the select callback (and other plugin callbacks also) this is the element instance the autocomplete is registered to.

Use that to traverse to the associated matching input to set the other value

 $(".language").autocomplete({ select: function(evt, ui) { $(this).parent().find('.language-id').val(ui.item.id); }, source: getData() }); function getData(){ return [{"label":"ActionScript","value":"ActionScript","id":1},{"label":"AppleScript","value":"AppleScript","id":2},{"label":"Asp","value":"Asp","id":3},{"label":"BASIC","value":"BASIC","id":4},{"label":"C","value":"C","id":5},{"label":"C++","value":"C++","id":6},{"label":"Clojure","value":"Clojure","id":7},{"label":"COBOL","value":"COBOL","id":8},{"label":"ColdFusion","value":"ColdFusion","id":9},{"label":"Erlang","value":"Erlang","id":10},{"label":"Fortran","value":"Fortran","id":11},{"label":"Groovy","value":"Groovy","id":12},{"label":"Haskell","value":"Haskell","id":13},{"label":"Java","value":"Java","id":14},{"label":"JavaScript","value":"JavaScript","id":15},{"label":"Lisp","value":"Lisp","id":16},{"label":"Perl","value":"Perl","id":17},{"label":"PHP","value":"PHP","id":18},{"label":"Python","value":"Python","id":19},{"label":"Ruby","value":"Ruby","id":20},{"label":"Scala","value":"Scala","id":21},{"label":"Scheme","value":"Scheme","id":22}] }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <p>Select programming languages, ID will be set when each language selected</p> <div> <label>Language: </label> <input class="language" placeholder="Select language"> <label>ID: </label> <input class="language-id" readonly> </div> <div> <label>Language: </label> <input class="language" placeholder="Select language"> <label>ID: </label> <input class="language-id" readonly> </div> <div> <label>Language: </label> <input class="language" placeholder="Select language"> <label>ID: </label> <input class="language-id" readonly> </div> </div>