如何在jQuery中通过循环批量实现输入框autocomplete功能？

首先你循环代码里有个基础语法错误：循环关键字是for，不是$for，多余的美元符号会直接导致代码执行失败。

另外需要确认你的输入框ID规则：如果你的目标输入框ID是toLocation_1到toLocation_20（和你手动写的fromLocation_1/fromLocation_2规则一致），那循环的起始值应该是1而不是0，否则会去查找不存在的toLocation_0元素。

修正后的循环代码 #

如果ID从0开始：

for(i = 0; i < 20; i++) {
    $("#toLocation_" + i).autocomplete({
        source: strLocations
    });
}

如果ID从1开始：

for(i = 1; i <= 20; i++) {
    $("#toLocation_" + i).autocomplete({
        source: strLocations
    });
}

更优雅的批量初始化方案 #

不用循环拼接ID，给所有需要自动补全的输入框添加统一的class（比如location-autocomplete），然后通过类选择器一次性初始化：

<!-- 示例输入框 -->
<input type="text" id="fromLocation_1" class="location-autocomplete">
<input type="text" id="toLocation_1" class="location-autocomplete">
<input type="text" id="toLocation_2" class="location-autocomplete">

$(".location-autocomplete").autocomplete({
    source: strLocations
});

这种方式更简洁，后续新增输入框只要加上指定class即可，无需修改JS代码。

内容的提问来源于stack exchange，提问作者Old Skewl Des