jQuery UI & Autocomplete: Custom data and display in drop down

This entry is part 7 of 7 in the series jQuery UI Autocomplete

jQuery UI Autocomplete – Custom data and display

You can use your own custom data formats and displays by simply overriding the default focus and select actions.

Try typing “j” to get a list of projects or just press the down arrow.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Custom data and display</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <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>
    <script>
        $(function () {
            var projects = [
                {
                    value: 'jquery',
                    label: 'jQuery',
                    desc: 'the write less, do more, JavaScript library',
                    icon: 'jquery_32x32.png'
                },
                {
                    value: 'jquery-ui',
                    label: 'jQuery UI',
                    desc: 'the official user interface library for jQuery',
                    icon: 'jqueryui_32x32.png'
                },
                {
                    value: 'sizzlejs',
                    label: 'Sizzle JS',
                    desc: 'a pure-JavaScript CSS selector engine',
                    icon: 'sizzlejs_32x32.png'
                }
            ];

            $('#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);
                    $('#project-icon').attr('src', 'images/' + ui.item.icon);

                    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 'j' for a start):</div>
<img id='project-icon' src='http://jqueryui.com/resources/demos/autocomplete/images/transparent_1x1.png'
     class='ui-state-default' alt=''>
<input id='project'>
<input type='hidden' id='project-id'>

<p id='project-description'></p>

</body>
</html>
Try The Code

jQuery UI & Tooltips: Custom content

This entry is part 4 of 7 in the series jQuery UI Tooltips

jQuery UI Tooltip – Custom content

Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Custom content</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .photo {
            width: 300px;
            text-align: center;
        }

        .photo .ui-widget-header {
            margin: 1em 0;
        }

        .map {
            width: 350px;
            height: 350px;
        }

        .ui-tooltip {
            max-width: 350px;
        }
    </style>
    <script>
        $(function () {
            $(document).tooltip({
                items: 'img, [data-geo], [title]',
                content: function () {
                    var element = $(this);
                    if (element.is('[data-geo]')) {
                        var text = element.text();
                        return "<img class='map' alt='" + text +
                                "' src='http://maps.google.com/maps/api/staticmap?" +
                                "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                                text + "'>";
                    }
                    if (element.is('[title]')) {
                        return element.attr('title');
                    }
                    if (element.is('img')) {
                        return element.attr('alt');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div class='ui-widget photo'>
    <div class='ui-widget-header ui-corner-all'>
        <h2>St. Stephens Cathedral</h2>

        <h3><a href='http://maps.google.com/maps?q=vienna,+austria&amp;z=11' data-geo=''>Vienna, Austria</a></h3>
    </div>
    <a href='http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG'>
        <img src='http://jqueryui.com/resources/demos/tooltip/images/st-stephens.jpg' alt='St. Stephen's Cathedral' class='ui-corner-all'>
    </a>
</div>

<div class='ui-widget photo'>
    <div class='ui-widget-header ui-corner-all'>
        <h2>Tower Bridge</h2>

        <h3><a href='http://maps.google.com/maps?q=london,+england&amp;z=11' data-geo=''>London, England</a></h3>
    </div>
    <a href='http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg'>
        <img src='http://jqueryui.com/resources/demos/tooltip/images/tower-bridge.jpg' alt='Tower Bridge' class='ui-corner-all'>
    </a>
</div>

<p>All images are part of <a href='http://commons.wikimedia.org/wiki/Main_Page'>Wikimedia Commons</a>
    and are licensed under <a href='http://creativecommons.org/licenses/by-sa/3.0/deed.en'
                              title='Creative Commons Attribution-ShareAlike 3.0'>CC BY-SA 3.0</a> by the copyright
    holder.</p>

</body>
</html>
Try The Code