CODEWITHSUNDEEP
javascriptjquery
acctman
acctman

Reputation: 4349

Simplify javascript code

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>

Upvotes: 5

Views: 615

Answers (5)

pimvdb
pimvdb

Reputation: 154838

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/

Upvotes: 13

Jose Faeti
Jose Faeti

Reputation: 12294

Give a class to all of those elements you want to autocomplete, 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() {
    $(".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
    });           
});

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.

Upvotes: 2

Pavel Donchev
Pavel Donchev

Reputation: 1889

Assuming the url and the element that autocompletes 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-completing elements, you can take it out as a parameter):

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 
    }); 
}

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

Upvotes: 2

lfxgroove
lfxgroove

Reputation: 3908

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

Upvotes: 2

Codler
Codler

Reputation: 11256

<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>

Upvotes: 4

Related Questions