09 January, 2019

JqueryUI - Button

           ,      No comments   

JqueryUI - Button

jQueryUI provides button() method to transform the HTML elements (like buttons, inputs and anchors) into themeable buttons, with automatic management of mouse movements on them, all managed transparently by jQuery UI.
In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling .buttonset().

Syntax

The button() method can be used in two forms −
  • $(selector, context).button (options) Method
  • $(selector, context).button ("action", params) Method

$ (selector, context).button (options) Method

The button (options) method declares that an HTML element should be treated as button. The options parameter is an object that specifies the behavior and appearance of the button.

Syntax

$(selector, context).button (options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).button({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
Sr.No. Option & Description
1 disabled This option deactivates the button is set to true. By default its value is false.
2 icons This option specifies that one or two icons are to be displayed in the button: primary icons to the left, secondary icons to the right. The primary icon is identified by the primary property of the object, and the secondary icon is identified by the secondary property. By default its value is primary: null, secondary: null.
3 label This option specifies text to display on the button that overrides the natural label. If omitted, the natural label for the element is displayed. In the case of radio buttons and checkboxes, the natural label is the <label> element associated with the control. By default its value is null.
4 text This option specifies whether text is to be displayed on the button. If specified as false, text is suppressed if (and only if) the icons option specifies at least one icon. By default its value is true.

Default Functionality

The following example demonstrates a simple example of button widget functionality, passing no parameters to the button() method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
This example demonstrates the markup that can be used for buttons: A button element, an input of type submit and an anchor.

Use of icons, text and disabled

The following example demonstrates the usage of two options icons, text and disabled in the button function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −
Here you can see a button with only icon, a button with two icons and a disabled button.

$ (selector, context).button ("action", params) Method

The button ("action", params) method can perform an action on buttons, such as disabling the button. The action is specified as a string in the first argument (e.g., "disable" to disable button). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).button ("action", params);
The following table lists the different actions that can be used with this method −
Sr.No. Action & Description
1 destroy This action removes the button functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
2 disable This action disables the button functionality of an element. This method does not accept any arguments.
3 enable This action enables the button functionality of an element. This method does not accept any arguments.
4 option( optionName ) This action retrieves the value of the option specified in optionName. Where optionName is a String.
5 option This action retrieves an object containing key/value pairs representing the current button options hash.
6 option( optionName, value ) This action sets the value of the button option associated with the specified optionName.
7 option( options ) This action sets one or more options for the button. Where options is map of option-value pairs to set.
8 refresh This action refreshes the display of the button. This is useful when the buttons are handled by the program and the display does not necessarily correspond to the internal state. This method does not accept any arguments.
9 widget This action returns a jQuery object containing the button element. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() and disable() methods.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Event Management on Buttons

In addition to the button (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
Sr.No. Event Method & Description
1 create(event, ui) This event is triggered when the button is created. Where event is of type Event, and ui is of type Object.

Example

The following example demonstrates the event method usage for button widget functionality. This example demonstrates the use of event create.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>
Let us save the above code in an HTML file buttonexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

by - tutorialspoint

 

JqueryUI - Autocomplete

           ,      No comments   

JqueryUI - Autocomplete

Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field. This feature prevents the user from having to enter an entire word or a set of words.
JQueryUI provides an autocomplete widget — 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. jQueryUI provides the autocomplete() method to create a list of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.
Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

Syntax

The autocomplete() method can be used in two forms −
  • $(selector, context).autocomplete (options) Method
  • $(selector, context).autocomplete ("action", params) Method

$ (selector, context).autocomplete (options) Method

The autocomplete (options) method declares that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. 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

$(selector, context).autocomplete (options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).autocomplete({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
Sr.No.Option & Description
1appendTo This option is used append an element to the menu. By default its value is null.
2autoFocus This option when set to true, the first item of the menu will automatically be focused when the menu is shown. By default its value is false.
3delay This option is an Integer representing number of milliseconds to wait before trying to obtain the matching values (as specified by the source option). This can help reduce thrashing when non-local data is being obtained by giving the user time to enter more characters before the search is initiated. By default its value is 300.
4disabled This option if specified and true, the autocomplete widget is initially disabled. By default its value is false.
5minLength The number of characters that must be entered before trying to obtain the matching values (as specified by the source option). This can prevent too large a value set from being presented when a few characters isn’t enough to whittle the set down to a reasonable level. By default its value is 1.
6position This option identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. By default its value is { my: "left top", at: "left bottom", collision: "none" }.
7source This option specifies the manner in which the data that matches the input data is obtained. A value must be provided or the autocomplete widget won’t be created. By default its value is none; must be specified.
The following section will show you a few working examples of autocomplete widget functionality.

Default Functionality

The following example demonstrates a simple example of autocomplete widget functionality, passing no parameters to the autocomplete() method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Use of autoFocus

The following example demonstrates the usage of option autoFocus in the autocomplete widget of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of minLength and delay

The following example demonstrates the usage of two options minLength and delay in the autocomplete widget of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML" 
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of Label

The following example demonstrates the usage of option label in the autocomplete widget of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of External Source

The following example demonstrates the use of external file for source option in the autocomplete widget of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>
The file search.php is placed at the same location as the above file (autocompleteexample.html). Contents of search.php are as below −
<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )
 
);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Type two letter words for e.g: ja, sc etc

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

The autocomplete ("action", params) method can perform an action on the list of suggestions, such as show or hide. The action is specified as a String in the first argument (e.g., "close" to hide the list). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).autocomplete ("action", params);;
The following table lists the different actions that can be used with this method −
Sr.No.Action & Description
1close This action hides the list of suggestions in the Autocomplete menu. This method does not accept any arguments.
2destroy This action removes the autocomplete functionality. Lists of suggestions are deleted. This method does not accept any arguments.
3disable This action disables the autocompletion mechanism. The list of suggestions no longer appears. This method does not accept any arguments.
4enable This action reactivates the autocompletion mechanism. The list of suggestions will again be displayed. This method does not accept any arguments.
5option( optionName ) This action retrieves the value of the specified param optionName. This option corresponds to one of those used with autocomplete (options).
6option This action gets an object containing key/value pairs representing the current autocomplete options hash.
7option( optionName, value ) This action sets the value of the autocomplete option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
8option( options ) This action is sets one or more options for the autocomplete. The argument options is a map of option-value pairs to be set.
9search( [value ] ) This action searches for correspondence between the string value and the data source (specified in options.source). The minimum number of characters (indicated in options.minLength) must be reached in value, otherwise the search is not performed.
10widget Retrieve the <ul> DOM element corresponding to the list of suggestions. This is an object of jQuery class that allows easy access to the list without using jQuery selectors.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of option( optionName, value ) method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML" 
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Extension Points

The autocomplete widget can be extended as its built with the widget factory. When extending widgets, you have the ability to override or add to the behavior of existing methods. The following table lists methods that act as extension points with the same API stability as the plugin methods listed above.
Sr.No.Method & Description
1_renderItem( ul, item ) This method controls the creation of each option in the widget's menu. This method creates a new <li> element, appends it to the menu and return it.
2_renderMenu( ul, items ) This method controls building the widget's menu.
3_resizeMenu() This method controls sizing the menu before it is displayed.The menu element is available at this.menu.element. This method does not accept any arguments.

Event Management on Autocomplete Elements

In addition to the autocomplete (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
Sr.No.Event Method & Description
1change(event, ui) This event is triggered when the value of the <input> element is changed based upon a selection. When triggered, this event will always come after the close event is triggered.
2close(event, ui) This event is triggered whenever the autocomplete menu closes.
3create(event, ui) This event is triggered when the autocomplete is created.
4focus(event, ui) This event is triggered whenever one of the menu choices receives focus. Unless canceled (for example, by returning false), the focused value is set into the <input> element.
5open(event, ui) This event is triggered after the data has been readied and the menu is about to open.
6response(event, ui) This event is triggered after a search completes, before the menu is shown. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled.
7search(event, ui) This event is triggered after any delay and minLength criteria have been met, just before the mechanism specified by source is activated. If canceled, the search operation is aborted.
8select(event, ui) This event is triggered when a value is selected from the autocomplete menu. Canceling this event prevents the value from being set into the <input> element (but doesn’t prevent the menu from closing).

Example

The following example demonstrates the event method usage in autocomplete widgets. This example demonstrates the use of events focus, and select.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var projects = [
               {
                  value: "java",
                  label: "Java",
                  desc: "write once run anywhere",
               },
               {
                  value: "jquery-ui",
                  label: "jQuery UI",
                  desc: "the official user interface library for jQuery",
               },
               {
                  value: "Bootstrap",
                  label: "Twitter Bootstrap",
                  desc: "popular front end frameworks ",
               }
            ];
            $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                     return false;
               },
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
    
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript. You must also see the following output −

 

Meta

Popular Posts

  • Laravel - Configuration
    In the previous chapter, we have seen that the basic configuration files of Laravel are included in the  config  directory. In this chapte...
  • Laravel - Namespaces
    Namespaces are used in various programming languages to create a separate group of variable, functions and classes. A program may contain ...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...
  • HTML Introduction
    Introduction to Hypertext Markup Language (HTML) A way to present HTML information in a beautiful and attractive way in the World Wide ...
  • Tutorials of Laravel Overview
    Introduction Laravel is an open-source PHP framework, which is robust and easy to understand. It follows a model-view-controller design ...

Categories

Social Media Links

Blog Archive

Laravel News

Loading...