3

このhttp://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/スクリプトは、都市に基づいて州と zip を自動的に入力します。

id="city" のような id を持つ行が 1 つあります。追加の行が必要な場合は、id="city1"、id="city2" などを使用する必要があります。

JavaScriptコードでは、次のようなものを使用できます

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

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

多くの行がある場合、これは問題ありません。

だから変えようとしている。以下は変更されたコードです

$(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="" />

cityスクリプトに何かを入力すると、自動的id="state"に , (それで問題ありません) が入力されますが、自動的に , andid="zip"も入力されます(これは必要ありません)。id="city1"id="state1"id="zip1"

必要な動作: に何かを入力するとid="city"、 と のみが自動的に入力され、他のすべてのフィールドは空白/変更されません。を入力すると、 と のみが自動的に入力され、他のすべてのフィールドは空白/変更されません。id="state"id="zip"id="city1"id="state"id="zip"

@JNFのアドバイスに基づいて、機能するコードが1つあります

$(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 に答える