Saturday, September 21, 2019

jQuery UI Autocomplete

Autocomplete mechanism is frequently used in modern websites to provide the users a list of suggestion while typing the beginning word in the text box. It facilitates the user to select an item from the list, which will be displayed in the input field. This feature prevents the users from having to enter an entire word or a set of words.

jQueryUI provides an autocomplete widget to facilitates users by giving a list of suggestions to type in a text box. It is a control that acts a lot like a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control.

Syntax:

You can use the autocomplete() method in two forms:

  1. $(selector, context).autocomplete (options) Method  
  1. $(selector, context).autocomplete ("action", params) Method  

First Method

The autocomplete (options) method specifies that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. Here the options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.

Syntax:

  1. $(selector, context).autocomplete (options);  
You can use one or more options at a time using JavaScript object. In the case of more than one options, you will have to separate them using a comma as follows:

  1. $(selector, context).autocomplete({option1: value1, option2: value2..... });  
Following is a list of different options that can be used with this method:

OptionDescription
appendToThis option is used append an element to the menu. By default its value is null.
autoFocusIf you set this option as TRUE, the first item of the menu will automatically be focused when the menu is shown. By default its value is FALSE.
delayThis option specifies the time delay in milliseconds to wait before trying to obtain the matching values (as specified by the source option). By default its value is 300.
disabledIf you set this option as true, the autocomplete widget is initially disabled. By default its value is false.
minlengthIt specifies the number of characters that must be entered before trying to obtain the matching values (as specified by the source option). By default its value is 1.
positionThis option identifies the position of the suggestions menu iaccording to the input element. By default its value is { my: "left top", at: "left bottom", collision: "none" }.
sourceThis option specifies the manner in which the data that matches the input data is obtained. You must have to provide a value or the autocomplete widget won?t be created. By default its value is none; must be specified.

jQuery UI autocomplete() example 1

Let's take a simple example to demonstrate the autocomplete widget functionality, passing no parameters to the autocomplete() method.

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>jQuery UI Autocomplete - Default functionality</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  9.   <link rel="stylesheet" href="/resources/demos/style.css">  
  10.   <script>  
  11.   $(function() {  
  12.     var availableTags = [  
  13.       "ActionScript",  
  14.       "AppleScript",  
  15.       "Asp",  
  16.       "BASIC",  
  17.       "C",  
  18.       "C++",  
  19.       "Clojure",  
  20.       "COBOL",  
  21.       "ColdFusion",  
  22.       "Erlang",  
  23.       "Fortran",  
  24.       "Groovy",  
  25.       "Haskell",  
  26.       "Java",  
  27.       "JavaScript",  
  28.       "Lisp",  
  29.       "Perl",  
  30.       "PHP",  
  31.       "Python",  
  32.       "Ruby",  
  33.       "Scala",  
  34.       "Scheme"  
  35.     ];  
  36.     $( "#tags" ).autocomplete({  
  37.       source: availableTags  
  38.     });  
  39.   });  
  40.   </script>  
  41. </head>  
  42. <body>  
  43. <div class="ui-widget">  
  44.  <p>Available Courses:</p>  
  45.   <label for="tags">Tags: </label>  
  46.   <input id="tags">  
  47. </div>  
  48. </body>  
  49. </html>  

jQuery UI autocomplete() method example 2

Use autoFocus in jQueryUI autocomplete () method:
Let's take an example to demonstarte the usage of option autoFocus in the autocomplete method.
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>jQuery UI Autocomplete - Default functionality</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  9.   <link rel="stylesheet" href="/resources/demos/style.css">  
  10.   <script>  
  11.   $(function() {  
  12.     var availableTags = [  
  13.       "ActionScript",  
  14.       "AppleScript",  
  15.       "Asp",  
  16.       "BASIC",  
  17.       "C",  
  18.       "C++",  
  19.       "Clojure",  
  20.       "COBOL",  
  21.       "ColdFusion",  
  22.       "Erlang",  
  23.       "Fortran",  
  24.       "Groovy",  
  25.       "Haskell",  
  26.       "Java",  
  27.       "JavaScript",  
  28.       "Lisp",  
  29.       "Perl",  
  30.       "PHP",  
  31.       "Python",  
  32.       "Ruby",  
  33.       "Scala",  
  34.       "Scheme"  
  35.     ];  
  36.     $( "#tags" ).autocomplete({  
  37.       source: availableTags  
  38.       autofocus:true  
  39.    });  
  40.   });  
  41.   </script>  
  42. </head>  
  43. <body>  
  44.  <div class="ui-widget">  
  45.   <label for="tags">Tags: </label>  
  46.   <input id="tags">  
  47. </div>  
  48.  </body>  
  49. </html>  

jQuery UI autocomplete() method example 3

Use of minLength and delay in jQueryUI autocomplete () method:
Let's take an example to demonstrate the usage of two options minLength and delay in jQueryUI autocomplete() method.

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>jQuery UI Autocomplete - Default functionality</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  9.   <link rel="stylesheet" href="/resources/demos/style.css">  
  10.   <script>  
  11.   $(function() {  
  12.     var availableTags = [  
  13.       "ActionScript",  
  14.       "AppleScript",  
  15.       "Asp",  
  16.       "BASIC",  
  17.       "C",  
  18.       "C++",  
  19.       "Clojure",  
  20.       "COBOL",  
  21.       "ColdFusion",  
  22.       "Erlang",  
  23.       "Fortran",  
  24.       "Groovy",  
  25.       "Haskell",  
  26.       "Java",  
  27.       "JavaScript",  
  28.       "Lisp",  
  29.       "Perl",  
  30.       "PHP",  
  31.       "Python",  
  32.       "Ruby",  
  33.       "Scala",  
  34.       "Scheme"  
  35.     ];  
  36.     $( "#tags" ).autocomplete({  
  37.       source: availableTags  
  38.       minLength:2,     
  39.       delay:500,     
  40.     });  
  41.   });  
  42.   </script>  
  43. </head>  
  44. <body>  
  45. <div class="ui-widget">  
  46.  <p>Type two letter for e.g:ja,sc etc</p>  
  47.  <p>Available Courses:</p>  
  48.   <label for="tags">Tags: </label>  
  49.   <input id="tags">  
  50. </div>  
  51. </body>  
  52. </html>  

jQuery UI autocomplete() method example 4

Use of lable in jQueryUI autocomplete () method:
Let's take an example to demonstrate the usage of option label in the autocomplete widget of jQueryUI:
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Autocomplete functionality</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- Javascript -->  
  10.       <script>  
  11.          $(function() {  
  12.             $( "#autocomplete-4" ).autocomplete({  
  13.                source: [  
  14.                   { label: "India", value: "IND" },  
  15.                     { label: "America", value: "USA" },  
  16.                       { label: "Pakistan", value: "PAK" },  
  17.                         { label: "Iceland", value: "ICE" },  
  18.                   { label: "Australia", value: "AUS" }  
  19.                ]  
  20.             });  
  21.          });  
  22.       </script>  
  23.    </head>  
  24.    <body>  
  25.       <!-- HTML -->   
  26.       <div class="ui-widget">  
  27.          <p>Type I OR A</p>  
  28.          <input id="autocomplete-4">  
  29.       </div>  
  30.    </body>  
  31. </html>  
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...