6

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

14

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/

1
  • 1
    he probably wants to specify that universal selector into input[data-code].
    – jAndy
    Commented Nov 27, 2011 at 10:14
5
<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>
3
  • @Codler, I really like how nice it looks +1 for that. I am however concerned what happens if you need to pass different values for cacheLength, that's why I proposed registering a function, as you can always parametrize more on that. I wonder if your solution has an elegant way for that (as it will be the best solution as far as I can tell)? Commented Nov 27, 2011 at 10:24
  • 1
    @PavelDonchev, I would use $.extend around each config then. eg. $("#locus").autocomplete( "/js/zip/us.php", $.extend({}, config, {cacheLength: 20}) );
    – Codler
    Commented Nov 27, 2011 at 15:47
  • @Codler, I think your example may appear to be the best then. I really love to have tight method calls (one line, one after another), but the case with the method calls is that when you pass parameters they are hidden, so in my answer, the cache length would have been a number in the method call - 20 for example, while in your case it is clearly visible that this number represent the cacheLength so I think your example is a lot more readable than mine. Thanks! Commented Nov 28, 2011 at 12:29
2

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.