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

2 回答 2

1

[id^="city"]您使用的选择器表示“以城市开头的任何内容”，因此它city1也会影响。其他人也一样。

我会将它们包装在另一个元素中，如下所示：

<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>

然后，在 jQuery 中类似

$(this).closest(".myForm").find("[id^=state]") etc...
于 2013-06-03T07:04:57.327 回答
1

我会为您的输入分配类，按类选择它们，然后通过它们的 ID 中的子字符串选择它们会更快：

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!');
}
);
于 2013-06-03T07:09:39.577 回答