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 Mobile: Mini drop down menu

This entry is part 67 of 73 in the series jQuery Mobile

This is a mini drop down menu with a selected option.

The 3rd option is selected in the menu.

This is the so called native drop down menu as building this is the same as building a Javascript drop down menu.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Mini Drop Down Menu App</h1>
    </div>

    <div data-role='content'>
        <form>
            <div class='ui-field-contain'>
                <select name='name1' id='id1' data-mini='true'>
                    <option value='1'>The 1st Option</option>
                    <option value='2'>The 2nd Option</option>
                    <option value='3' selected='selected'>The 3rd Option</option>
                    <option value='4'>The 4th Option</option>
                </select>
            </div>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Basic drop down or select menu

This entry is part 66 of 73 in the series jQuery Mobile

This is the familiar drop down or select menu.  

This is the so called native drop down menu as constructing it is similar to constructing a web page drop down menu using Javascript.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Drop Down Menu App</h1>
    </div>

    <div data-role='content'>
        <form>
            <div class='ui-field-contain'>
                <select name='select-native-1' id='select-native-1'>
                    <option value='1'>The 1st Option</option>
                    <option value='2'>The 2nd Option</option>
                    <option value='3'>The 3rd Option</option>
                    <option value='4'>The 4th Option</option>
                </select>
            </div>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

PHP: Creating a dropdown list using PHP

This entry is part 50 of 54 in the series PHP Tutorial

Now instead of getting the selected value from a dropdown list, let’s use PHP to create a dropdown list.

To create a list, we need to understand a bit more about array, especially associative array.

<?php
$arr = array('one'=>'ONE', 'two'=>'TWO', 'three'=>'THREE');

foreach ($arr as $key => $value) {
    echo "Key: $key; Value: $value<br />";
}
?>

Please try to run the code here.

The foreach statement allows us to print out the key value pair.

This key value combination is what we need for creating a dropdown list.

<select name='dropdown'>

    <?php

    $car = array('bmw' => 'BMW', 'renault' => 'Renault', 'toyota' => 'Toyota');
    $length = count($car);

    foreach ($car as $key => $value) {
        echo "<option value=\'$key\'>$value</option>";
    }

    ?>
</select>

Please try to run the code here.