Question

如何简化此代码？如果需要，我可以将.php文件重命名为与ID元素完全相同的名称，以便$("#locus")可以使用/js/zip/"id element".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>

Answer 1

如果您为HTML中的每个元素添加data-code属性，请执行以下操作：

data-code="uk"

然后您可以使用.data("code")访问这些代码，并将代码简化为以下内容：

$("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
    });
});

http://jsfiddle.net/uHhc7/1/

Answer 2

<script type="text/javascript">
$().ready(function() {
    var config = {
        matchContains: true, matchFirst: true, mustMatch: false,
        selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
        scrollHeight: 150, width: 185, max: 20, scroll: true
    };
    $("#locus").autocomplete("/js/zip/us.php", config);
    $("#locca").autocomplete("/js/zip/ca.php", config); 
    $("#locuk").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);            
});
</script>

Answer 3

我能想到的是让阵列看起来像这样：

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

等。然后使用

循环遍历所有内容

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

Answer 4

假设url和自动填充的元素是所有调用之间的唯一区别，我会注册一个函数来获取它们并重复每个url和元素。

这很像Codler上面的示例，唯一的区别是你可以取出另一个参数（例如，如果以后你想为某些自动完成元素设置不同的缓存长度，你可以把它作为一个参数）：

registerElmtAutoComplete = function(jQueryElmt, url)
{
       jQueryElmt.autocomplete(url, { 
           matchContains: true, matchFirst: true, mustMatch: false, 
           selectFirst: false, cacheLength: 10, minChars: 1, autofill: false, 
           scrollHeight: 150, width: 185, max: 20, scroll: true 
    }); 
}

然后称之为：

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

Answer 5

为要自动完成的所有元素提供一个类，然后使用名称重命名您的php文件（如果元素的ID）（或者为每个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标记。

简化JavaScript代码

5 个答案: