jquery autocomplete with input arrays

150
March 18, 2018, at 08:39 AM

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>

READ ALSO
Jquery DataTable calling in dropdown change event issue

Jquery DataTable calling in dropdown change event issue

I'm stuck on simple point in jquery datatableI have dropdown selection and according to it, it should have to populate data in datatable

153
Product Refine filter by categories, price and regions

Product Refine filter by categories, price and regions

I am still learning web development and I am working on a project in order to learn how to develop a complete website with all functionalitiesI am currently trying to implement the product refine filter by categories, condition, region and price

112
how can i make my timer to reload to page when the countdown ends?

how can i make my timer to reload to page when the countdown ends?

hello i am trying to make a countdown which refreshes the page when the countdown finished however the timer is not refreshing page when countdown ends it start more counting in clock wise for example the timer has to reload the page after 3 , 2 ,1 , but it goes like 3, 2, 1 , 1, 2 ,3 and so on below is my code

119
Convert HTML string to respective XML string [on hold]

Convert HTML string to respective XML string [on hold]

Is there any way to convert string which contains data in HTML format to respective XML via Javascript/Jquerry?

124