w3resource logo


jquery UI exercises

jQuery UI: Create a pre-populated list of values and disables the autocomplete


jQuery UI Fundamental - I : Exercise-11

Create a pre-populated list of values and disables the autocomplete.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Create a pre-populated list of values and disables the autocomplete.
</title>
    <style type="text/css">
    button {
    display: block;
    margin: 20px 0 0 0;
    }   
</head>      
<body>
<label for="autocomplete">Select a Tutorial</label>
<input id="autocomplete">
<button id="button1">Click to disabled autocomplete </button>       
</body>
</html>

JavaScript Code :

$( "#autocomplete" ).autocomplete({
  source: [ "HTML", "CSS", "JavaScript", "PHP", "Python", "SQL", "MySQL"]
});


$('#button1').click(function(){ 

 var disabled = $( "#autocomplete" ).autocomplete( "option", "disabled" );
 
$( "#autocomplete" ).autocomplete( "option", "disabled", true );
});
Create a pre-populated list of values and disables the autocomplete on jsbin.com

Improve this sample solution and post your code through Disqus.



Join our Question Answer community to learn and share your programming knowledge.

Solve these problems:

Java: How to convert a string to an integer in Java?

C#: Loops in c#

SQL: JOIN using more than 5 tables