简化javascript代码

如何简化此代码？如果需要，我可以将.php文件重命名为与ID元素相同的确切名称，这样就可以使用

$（“#轨迹”）

了

/js/zip/“ID元素”.php

或其他任何东西。只有这样才有帮助

    <script type="text/javascript">
    $().ready(function() {
        $("#locus").autocomplete("/js/zip/us.php", {
            matchContains: true, matchFirst: true, mustMatch: false,
            selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
            scrollHeight: 150, width: 185, max: 20, scroll: true
        });
        $("#locca").autocomplete("/js/zip/ca.php", {
            matchContains: true, matchFirst: true, mustMatch: false,
            selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
            scrollHeight: 150, width: 185, max: 20, scroll: true
        }); 
        $("#locuk").autocomplete("/js/zip/uk.php", {
            matchContains: true, matchFirst: true, mustMatch: false,
            selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
            scrollHeight: 150, width: 185, max: 20, scroll: true
        });
        $("#locau").autocomplete("/js/zip/au.php", {
            matchContains: true, matchFirst: true, mustMatch: false,
            selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
            scrollHeight: 150, width: 185, max: 20, scroll: true
        });            
        $("#locie").autocomplete("/js/zip/ie.php", {
            matchContains: true, matchFirst: true, mustMatch: false,
            selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
            scrollHeight: 150, width: 185, max: 20, scroll: true
        });            
        $("#locot").autocomplete("/js/zip/ot.php", {
            matchContains: true, matchFirst: true, mustMatch: false,
            selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
            scrollHeight: 150, width: 185, max: 20, scroll: true
        });            
    });
    </script>

$（）.ready（函数（））{
$（“#轨迹”）.autocomplete（“/js/zip/us.php”{
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
});
$（“#locca”）.autocomplete（“/js/zip/ca.php”{
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
}); 
$（“#locak”）.autocomplete（“/js/zip/uk.php”{
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
});
$（“#locau”）.autocomplete（“/js/zip/au.php”{
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
});            
$（“#locie”）.autocomplete（“/js/zip/ie.php”{
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
});            
$（“#locot”）.autocomplete（“/js/zip/ot.php”{
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
});            
});

$（）.ready（函数（））{
变量配置={
matchContains:true，matchFirst:true，mustMatch:false，
选择First:false、cacheLength:10、minChars:1、autofill:false，
滚动高度：150，宽度：185，最大值：20，滚动：真
};
$（“#轨迹”）.autocomplete（“/js/zip/us.php”，config）；
$（“#locca”）.autocomplete（“/js/zip/ca.php”，config）；
$（“#locak”）.autocomplete（“/js/zip/uk.php”，config）；
$（“#locau”）.autocomplete（“/js/zip/au.php”，config）；
$（“#locie”）.autocomplete（“/js/zip/ie.php”，config）；
$（“#locot”）.autocomplete（“/js/zip/ot.php”，config）；
});

如果向HTML中的每个元素添加

数据代码

属性，如下所示：

data-code="uk"

$("input[data-code]").each(function() { // all inputs with data-code attribute
    $(this).autocomplete("/js/zip/" + $(this).data("code") + ".php", { // insert code
        matchContains: true, matchFirst: true, mustMatch: false,
        selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
        scrollHeight: 150, width: 185, max: 20, scroll: true
    });
});

然后，您可以使用

.data（“code”）

访问这些代码，并将代码简化为如下内容：

data-code="uk"

$("input[data-code]").each(function() { // all inputs with data-code attribute
    $(this).autocomplete("/js/zip/" + $(this).data("code") + ".php", { // insert code
        matchContains: true, matchFirst: true, mustMatch: false,
        selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
        scrollHeight: 150, width: 185, max: 20, scroll: true
    });
});

---

我能想到的是让一个数组看起来像这样：

arr[0] = 'us'; arr[1] = 'ca' ;

等等，然后用

$("#loc" + arr[i]).autocomplete()...

---

假设url和自动完成的元素是所有调用之间的唯一区别，我将注册一个函数，接受它们并对每个url和元素重复

这与上面Codler的示例非常相似，唯一的区别是您可以取出另一个参数（例如，如果以后您希望为某些自动完成元素使用不同的缓存长度，您可以将其取出作为参数）：

然后像这样称呼它：

$().ready(function() { 
    registerElmtAutoComplete($("#locus"), "/js/zip/us.php");
    registerElmtAutoComplete($("#locca"), "/js/zip/ca.php");
    registerElmtAutoComplete($("#locuk"), "/js/zip/uk.php");
}

---

为所有要自动完成的元素指定一个类，然后使用名称（如果元素的ID为）重命名php文件（或者为每个html元素使用具有指定php名称的数据属性）

你最终会得到这样的东西

$().ready(function() {
    $(".autocomplete").autocomplete("/js/zip/" + $(this).attr('id') + ".php", {
        matchContains: true, matchFirst: true, mustMatch: false,
        selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
        scrollHeight: 150, width: 185, max: 20, scroll: true
    });           
});

---

通过这种方式，您可以添加或删除任意数量的新元素，这一切都是自动为您完成的，并且无需使用比所需更多的属性来脏化html标记。

使用类而不是ID，并将URL存储在元素的属性中……他可能想在

输入中指定通用选择器[数据代码]

@Codler，我真的很喜欢它看起来有多漂亮+1。但是我担心如果需要为cacheLength传递不同的值会发生什么，这就是为什么我建议注册一个函数，因为你可以在这方面进行更多参数化。我想知道你的解决方案是否有一种优雅的方式（据我所知，这将是最好的解决方案）@PavelDonchev，我会在每个配置周围使用

$扩展
。例如
$（“#轨迹”）.autocomplete（“/js/zip/us.php”），$.extend（{}，config，{cacheLength:20}）；
@Codler，我认为你的示例可能是最好的。我真的喜欢有紧凑的方法调用（一行接一行），但方法调用的情况是，当您传递参数时，它们是隐藏的，因此在我的回答中，缓存长度应该是方法调用中的一个数字-例如，20，而在您的情况下，很明显，这个数字表示缓存长度，因此我认为您的示例比我的示例更可读。谢谢！