3

This http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/ script automatically fills state and zip, based on city.

There is one row with id like id="city". If I want additional rows, I must use something like id="city1", id="city2" etc.

In javascript code then may use something like

$("#city").val(ui.item.city);

$("#city1").val(ui.item.city1);

This is not ok, if I have many rows.

So I trying to change. Below is changed code

$(document).ready(function(){
var ac_config = {
source: "__demo_cities.php",
select: function(event, ui){
$('[id^="city"]').val(ui.item.city);
$('[id^="state"]').val(ui.item.state);
$('[id^="zip"]').val(ui.item.zip);
},
minLength:1
};
$('[id^="city"]').autocomplete(ac_config);
});

HTML

<input type="text" name="city[]" id="city" value="" />
<input type="text" name="state[]" id="state" value="" />
<input type="text" name="zip[]" id="zip" value="" />

<br>
<input type="text" name="city[]" id="city1" value="" />
<input type="text" name="state[]" id="state1" value="" />
<input type="text" name="zip[]" id="zip1" value="" />

If I enter something in city script automatically fills id="state", id="zip" (that is ok), but it also automatically fills id="city1", id="state1" and id="zip1" (that is not necessary).

Need behavior: if enter something in id="city", automatically fills only id="state" and id="zip" and all other fields remains blank/unchanged; if enter in id="city1", automatically fills only id="state" and id="zip" and all other fields remains blank/unchanged.

Based on @JNF advice there is one code that works 

$(document).ready(function(){
var ac_config = {
source: "__demo_cities.php",
select: function(event, ui){
$(this).closest(".myForm").find('[id^="city"]').val(ui.item.city);
$(this).closest(".myForm").find('[id^="state"]').val(ui.item.state);
$(this).closest(".myForm").find('[id^="zip"]').val(ui.item.zip);
},
minLength:1
};
$('[id^="city"]').autocomplete(ac_config);
});
user2360838
  • 145
  • 4
  • 12

2 Answers2

1

The [id^="city"] selector you're using means "anything starting with city", so it affects city1 as well. The same with the rest of them.

I would wrap them in another element, something like this:

<span class="myForm">
  <input type="text" name="city[]" id="city" value="" />
  <input type="text" name="state[]" id="state" value="" />
  <input type="text" name="zip[]" id="zip" value="" />
</span>
<span class="myForm">
  <br>
  <input type="text" name="city[]" id="city1" value="" />
  <input type="text" name="state[]" id="state1" value="" />
  <input type="text" name="zip[]" id="zip1" value="" />
</span>

Then, in jQuery something like

$(this).closest(".myForm").find("[id^=state]") etc...
JNF
  • 3,696
  • 3
  • 31
  • 64
  • Changed code to $(this).closest(".myForm").find("#city").val(ui.item.city); $(this).closest(".myForm").find("#state").val(ui.item.state); $(this).closest(".myForm").find("#zip").val(ui.item.zip); But what to do with $('[id^="city"]').autocomplete(ac_config); ? Now only the first row works. If $('[id^="city"]').autocomplete(ac_config); change to $(this).closest(".myForm").find("#city").autocomplete(ac_config); then does not work at all – user2360838 Jun 03 '13 at 07:28
  • You need to change the HTML as well, of course. Also, Keep the code as `[id^=city]`, not `#city`. I fixed the answer. – JNF Jun 03 '13 at 07:29
1

I would assign classes to your inputs, it's faster to select them by class, then by substring in their IDs:

HTML

<input type="text" class="city" name="city[]" id="city0" value="" />
<input type="text" class="state" name="state[]" id="state0" value="" />
<input type="text" class="zip" name="zip[]" id="zip0" value="" />

<br>
<input type="text" class="city" name="city[]" id="city1" value="" />
<input type="text" class="state" name="state[]" id="state1" value="" />
<input type="text" class="zip" name="zip[]" id="zip1" value="" />

JavaScript

$( ".city" ).change(function(e) {
var anIDString=this.id;
anIDString = anIDString.replace('city','zip');
$('#'+anIDString).val('This one changed!');
}
);
David Jashi
  • 4,490
  • 1
  • 21
  • 26
  • Thank you. unfortunately class cannot be used in my case. Because, class names I need like city, city1, city2 etc. – user2360838 Jun 03 '13 at 07:12
  • 2
    You do realise, that you can assign several classes to HTML element, and instead of "city" for this purpose you may use "something_totally_different"? – David Jashi Jun 03 '13 at 07:19
  • You mean like class="city city_otherclass"? http://stackoverflow.com/questions/8722163/how-to-assign-multiple-classes-to-an-html-container. I did not know it... Thank you. Will try – user2360838 Jun 03 '13 at 07:31
  • Well, repeating "city" twice is not a good thing to do, but otherwise - you got an idea. – David Jashi Jun 03 '13 at 07:32
  • there is _ i mean city_otherclass. Because of row below the underscore sign is not visible – user2360838 Jun 03 '13 at 07:39