Simplify javascript code

Question

How can I simplify this code? if necessary, I can rename the .php files to the same exact name as the ID element, so $("#locus") can use /js/zip/"id element".php or whatever. It is only if it helps.

  <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 the data-code attribute to each element in the HTML, for example:

 data-code="uk" 

then you can access these codes with .data("code") and simplify your code 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 that the array looks something like this:

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

etc .. then iterate over everything with

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

Answer 4

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

This is very similar to the Codler example above, with the only difference being that you can make another parameter (for example, if you later want to have a different cache length for some autocomplete elements, you can take it 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 this:

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

Answer 5

Provide a class to all those elements that you want to autocomplete, and then rename your php files with a name if the element identifier (or use the data attribute with the specified php name for each html element).

You end up with 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 that you need, and all this is done automatically for you, and there is no need to pollute your html markup with more attributes than necessary.