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").autoplete("/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").autoplete("/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").autoplete("/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").autoplete("/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").autoplete("/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").autoplete("/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>

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").autoplete("/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").autoplete("/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").autoplete("/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").autoplete("/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").autoplete("/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").autoplete("/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>

• javascript
• jquery

• use a class instead of an ID and store the URL within an attribute on the element .... – Manse Commented Nov 27, 2011 at 10:11

5 Answers 5

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).autoplete("/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/uHhc7/1/

<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").autoplete("/js/zip/us.php", config);
    $("#locca").autoplete("/js/zip/ca.php", config); 
    $("#locuk").autoplete("/js/zip/uk.php", config);
    $("#locau").autoplete("/js/zip/au.php", config);            
    $("#locie").autoplete("/js/zip/ie.php", config);            
    $("#locot").autoplete("/js/zip/ot.php", config);            
});
</script>

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]).autoplete()...

Assuming the url and the element that autopletes are the only differences between all the calls, I would register a function that takes them and repeat for each url and element.

It's much like Codler's example above with the only difference that you can take out another parameter (for example if later you want to have a different cache-length for some of the auto-pleting elements, you can take it out as a parameter):

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

And then call it like:

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

Give a class to all of those elements you want to autoplete, then rename your php files with the name if the ID of the elements (or use a data attribute with the specified php name for each html element).

You will end up having something like this.

$().ready(function() {
    $(".autoplete").autoplete("/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
    });           
});

This way you can add or remove as many new elements you want, it's all done automatically for you, and there's no need to dirty your html markup with more attributes than needed.