Simplify javascript code

Question

How can I simplify this code? if needed I can rename the .php files to be the same exact name as the ID element so $("#locus") can be used /js/zip/"id element".php or whatever. Thats only if that helps out.

    <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

If you add a data-code attribute to each element in HTML like this:

data-code="uk"

then you can access these codes with .data("code"), and simplify your code to something like this:

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

What i can think of is making an array looking something like this:

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

etc. then looping over everything with

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