Search code examples
jqueryhtmljquery-uijquery-autocomplete

Unable to run the auto complete code

I copied this below code from the Jquery. when I try to run this code on my system nothing is performing, Do I have to change anything in the scripts in header tag?

Below is the code which I copied: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body> 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete"> 
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
</script> 
</body>
</html>

I new to Jquery, I am unaware of inheriting the script file in the header, can you also explain how to do it?

Thank you.

Solution

  • Your code is fine, though 1 possibility is the use of relative protocol to include the jQuery and jQuery UI resources.

    If you are loading your html page using file protocol(the page url in the addressbar starts with file://) not using a web protocol like http or https then the system will not be able to find the remote resources. Thus the loading of jQuery and UI will fail causing the script to fail in the page.

    Instead you can try to load the external resources by specifying the complete uri like

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>