順序自動完成

考慮下表：順序自動完成

<table> 
    <tr> 
     <th>Country</th> 
     <th>State/Province</th> 
     <th>City</th> 
    </tr> 
    <tr> 
     <td><input name="country_1" value="" /></td> 
     <td><input name="stateProv_1" value="" /></td> 
     <td><input name="city_1" value="" /></td> 
    </tr> 
    <tr> 
     <td><input name="country_n" value="" /></td> 
     <td><input name="stateProv_n" value="" /></td> 
     <td><input name="city_n" value="" /></td> 
    </tr> 
    ... 
</table>

我想用jQuery UI Autocomplete來幫助我的用戶輸入的數據。 country_1的值用於選擇stateProv_1的可能值用於選擇city_1的可能值。

這種順序自動完成的解釋很好by this Q&A。

我的問題涉及到jQuery位本身：我必須爲每個輸入標籤調用自動完成代碼嗎？

$("country_1").autocomplete({ ... }); 
$("stateProv_1").autocomplete({ ... }); 
$("city_1").autocomplete({ ... }); 
... 
$("country_n").autocomplete({ ... }); 
$("stateProv_n").autocomplete({ ... }); 
$("city_n").autocomplete({ ... });

還是有每個型自動完成的（國家，StateProv，市）來監視其所有輸入的方式嗎？

n根據用戶上下文而變化。

來源

2013-03-20 Drew

您可能需要重複它的3種類型，而不是爲3種類型的X n次

$('input[name^="country_"]').autocomplete({ ... }); 
$('input[name^="stateProv_"]').autocomplete({ ... }); 
$('input[name^="city_"]').autocomplete({ ... });

您可以使用this.element源函數裏面做這

喜歡的東西

$('input[name^="stateProv_"]').autocomplete({ 
    source: function(request, term){ 
     console.log(request, this.element); 
     var name = this.element.attr('name'); 
     var idx = name.substring(10); 
     var elcountry = $('input[name="country_' + idx + '"]'); 
     console.log(idx, 'c', elcountry.val()) 
    } 
})

演示：Fiddle

來源

2013-03-20 03:30:22

請參閱我對Dipesh的評論。 – Drew 2013-03-20 03:32:11

你正在使用'source'函數不是嗎？ – 2013-03-20 03:32:54

@AndrewHeath看到我的更新 – 2013-03-20 03:42:31

可以監視所有輸入：

$("input").autocomplete({ ... });

來源

2013-03-20 03:22:04 basarat

可以使用class爲input，然後應用到auto-completeclass。

HTML

<td><input class="makemeauto" name="country_1" value="" /></td> 
<td><input class="makemeauto" name="stateProv_1" value="" /></td> 
<td><input class="makemeauto" name="city_1" value="" /></td>

jQuery的

$(".makemeauto").autocomplete({ ... });

評論響應

您需要單獨調用autocomplete每個元素：

<td><input class="makemeauto" name="country_1" value="" data-autocomplete-source ="source_country"/></td> 
<td><input class="makemeauto" name="stateProv_1" value="" data-autocomplete-source ="source_stateProy"/></td> 
<td><input class="makemeauto" name="city_1" value="" data-autocomplete-source ="source_city" /></td> 


$('input.makemeauto').each(function() 
{ 
    $(this).autocomplete({ 
     source: $(this).data('autocomplete-source') 
    }); 
});

來源

2013-03-20 03:26:54

怎麼那麼你限制'stateProv_2'的自動完成查詢，僅做一個開關使用'country_2'中的值？ – Drew 2013-03-20 03:30:17

@AndrewHeath你可以使用'switch'或'if'來獲取當前正在訪問哪個'textbox'，並根據該請求發出'request'。 – 2013-03-20 03:33:48

@AndrewHeath看到我的更新答案，這將有所幫助。 – 2013-03-20 03:39:32

您可以使用1個功能來更新自動填充。也許給每個類型的輸入一個類。

<td><input class="country" name="country_n" value="" /></td> 
     <td><input class="state" name="stateProv_n" value="" /></td> 
     <td><input class="city" name="city_n" value="" /></td> 

$(function(){ 
    $(".country").change(countryChanged); 
    $(".state").change(stateChanged); 
}); 

function countryChange(){ 
    var $countryInput = $(this); 
    var $stateInput = $countryInput.parent().next().children(".state"); 
    $stateInput.autocomplete({}); 
} 
function stateChange(){ 
    //similar code sequence 
}

你也可以擁有1個功能與確定取決於它是否是一個國家或國家等

來源

2013-03-20 03:34:19 MorningDew

順序自動完成

回答

相關問題