title: multiple jquery functions not working
body: <p>I'm writing a html page where there are 1 different jquery operations done.</p>
  
  <ol>
  <li>Selecting dates from jquery datepicker plugin.</li>
  <li>Getting data from database for auto complete.</li>
  </ol>
  
  <p>And below is my code.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Autocomplete in java web application using Jquery and
      JSON&lt;/title&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="autocompleter.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet"
      href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
  
  &lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="header"&gt;
          &lt;h3&gt;Autocomplete in java web application using Jquery and JSON&lt;/h3&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div class="search-container"&gt;
          &lt;div class="ui-widget"&gt;
              &lt;input type="text" id="search" name="search" class="search" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;p&gt;
          Date: &lt;input type="text" id="startDatePicker"&gt;
      &lt;/p&gt;
      &lt;p&gt;
          Date: &lt;input type="text" id="endDatePicker"&gt;
      &lt;/p&gt;
      &lt;div id="resultarea"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>autocompleter.js</strong></p>
  
  <pre><code>$(document).ready(function() {
      $(function() {
          $("#startDatePicker").datepicker();
          $("#endDatePicker").datepicker();
      });
  });
  
  $(document).ready(function() {
      $(function() {
          $("#search").autocomplete({
              source : function(request, response) {
                  $.ajax({
                      url : "Controller",
                      type : "GET",
                      data : {
                          term : request.term
                      },
                      dataType : "json",
                      success : function(data) {
                          response(data);
                      }
                  });
              }
          });
      });
  });
  </code></pre>
  
  <p>Here, fetching the data for displaying name is working fine, but the datepicker is not working as expected. But when i use the below code. (Removing the datepicker from and pasting it in index.html header's script tag). The datepicker is working fine. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="ISO-8859-1"&gt;
  &lt;title&gt;Autocomplete in java web application using Jquery and
      JSON&lt;/title&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="autocompleter.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet"
      href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
  
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;script&gt;
      $(function() {
          $("#startDatePicker").datepicker();
          $("#endDatePicker").datepicker();
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="header"&gt;
          &lt;h3&gt;Autocomplete in java web application using Jquery and JSON&lt;/h3&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;div class="search-container"&gt;
          &lt;div class="ui-widget"&gt;
              &lt;input type="text" id="search" name="search" class="search" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;p&gt;
          Date: &lt;input type="text" id="startDatePicker"&gt;
      &lt;/p&gt;
      &lt;p&gt;
          Date: &lt;input type="text" id="endDatePicker"&gt;
      &lt;/p&gt;
      &lt;div id="resultarea"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm unable to know where am I going wrong. And why the second code works and why doesn't the first. </p>
  
  <p>One of my teachers suggested that making HTML in plain and linking all the css and js would be a good design approach, So I wanted to separate the js file from HTML.</p>
  
  <p>Thanks</p>