How to make basic Autocomplete using jQuery UI ?

How to make a basic dialog using jQuery UI ?

Last Updated : 18 Jan, 2021

In this article, we will be creating a Basic dialog using jQuery UI.

Approach: First, add jQuery UI scripts needed for your project.

<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>

Example 1:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <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 () {
            $("#gfg").dialog({
                autoOpen: true,
            });
            $("#geeks").click(function () {
                $("#gfg").dialog("open");
            });
        });
    </script>
</head>

<body>
    <div id="gfg" title="GeeksforGeeks">
        jquery UI| basic dialog option
    </div>
    
    <button id="geeks">Open Dialog</button>
</body>

</html>

Output:

Example 2:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <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 () {
            $("#gfg").dialog({
                autoOpen: false,
            });
            $("#geeks").click(function () {
                $("#gfg").dialog("open");
            });
        });
    </script>
</head>

<body>
    <div id="gfg" title="GeeksforGeeks">
        Jquery UI| basic dialog option
    </div>
    
    <button id="geeks">Open Dialog</button>
</body>

</html>

Output:

How to make basic Autocomplete using jQuery UI ?

taran910

Improve

Article Tags :

Similar Reads

How to make basic Datepicker using jQuery UI ?

In this article, we will be creating a basic Datepicker using jQuery UI. For localization of Datepicker, refer this article. Approach: First, add jQuery UI scripts needed for your project. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script sr

How to make basic menu using jQuery UI ?

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI menu is a Themeable menu that is used with mouse and keyboard interactions for navigating between pages. In this article, w

How to make basic Autocomplete using jQuery UI ?

jQuery UI Autocomplete can be used for providing auto-completion support for text fields in the webpage. The local Autocompleter is used when auto-completion options are given as an array to the Autocompleter to display as the choices. Approach: First, add jQuery UI scripts needed for your project.

How to make an accordion using jQuery easy UI ?

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. In this article, we will learn how to design accordion using jQuery Eas

How to create a Dialog Popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Dialog popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet

How to remove close button from jQuery UI dialog using CSS ?

In this article, we will learn how to remove the close button on the jQuery UI dialog using CSS. This can be achieved by setting the display property of the ui-dialog-titlebar-close class element to none. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built o

How to remove close button from jQuery UI dialog using jQuery ?

In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is

How to create automatic pop-up using jQuery ?

In this article, we will be showing you how to make a custom automatic Pop-up box for subscribing to any service. You might have often come across a Pop-up box asking to subscribe to any services when you visit any particular site. Hence in this article, you will learn how to customize that Pop-up b

jQuery UI dialog widget() Method

The dialog widget() method in jQuery UI returns the dialog box's widget element. Syntax: var a = $( ".selector" ).dialog("widget");Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"

How to design login dialog using jQuery EasyUI Mobile ?

EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. In this article, we will learn to design login dialog and message dialo