I would like to use the code for the auto-plete. The code is here.
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autoplete({
source: availableTags
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>The Autoplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
However, I cannot figure out where I should put this code. In head? In body?
I would like to use the code for the auto-plete. The code is here.
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autoplete({
source: availableTags
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>The Autoplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
However, I cannot figure out where I should put this code. In head? In body?
Share Improve this question edited Jan 3, 2012 at 20:27 Josh Darnell 11.4k9 gold badges39 silver badges66 bronze badges asked Jan 10, 2011 at 14:28 RomanRoman 131k173 gold badges367 silver badges467 bronze badges5 Answers
Reset to default 5According to w3schools
When to put script in HEAD
Scripts to be executed when they are called, or when an event is triggered, are placed in functions. Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.
When to put script in BODY
If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.
So in your case. You can put the script in the body
You should probably put your code right at the end of the body tag.
Check out Steve Souder's High Performance Web Sites - Evolution of Script Loading
If you have multiple script includes and need to convince yourself that they will load in the correct order for you, check out WebSiteOptimization.'s Article on the Defer Attribute, where you can see the order your scripts execute.
Put it into external file and then link that file with HTML document using:
<head>
...
<script type="text/javascript" src="/scripts/my-script.js"></script>
</head>
(if you're using HTML5 you can skip type attribute).
The above way is the most clear and mon one, however some researches proves that it's not the fastest way. You could put that JavaScript right before </body> element, skipping jQuery.read() ($(function() { ... }); in this case, which is a short form of that). You'll gain some milliseconds (or even less) in that case, but I just feel forced to notice that.
Yes you should put it inside the body element.
If you can, put it at the very end of the <body> element, after you've included jQuery, the autoplete plugin itself, and any other libraries you depend on. Putting scripts at the end of the <body> is generally (at the time of this writing :-) considered to be a best practice because it allows the browser to get to the markup before having to worry about script execution.