root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/autocomplete/multiple-remote.html @ 26899

Revision 26899, 2.3 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Autocomplete - Multiple, remote</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.ui.core.js"></script>
9    <script src="../../ui/jquery.ui.widget.js"></script>
10    <script src="../../ui/jquery.ui.position.js"></script>
11    <script src="../../ui/jquery.ui.autocomplete.js"></script>
12    <link rel="stylesheet" href="../demos.css">
13    <style>
14    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
15    </style>
16    <script>
17    $(function() {
18        function split( val ) {
19            return val.split( /,\s*/ );
20        }
21        function extractLast( term ) {
22            return split( term ).pop();
23        }
24
25        $( "#birds" )
26            // don't navigate away from the field on tab when selecting an item
27            .bind( "keydown", function( event ) {
28                if ( event.keyCode === $.ui.keyCode.TAB &&
29                        $( this ).data( "autocomplete" ).menu.active ) {
30                    event.preventDefault();
31                }
32            })
33            .autocomplete({
34                source: function( request, response ) {
35                    $.getJSON( "search.php", {
36                        term: extractLast( request.term )
37                    }, response );
38                },
39                search: function() {
40                    // custom minLength
41                    var term = extractLast( this.value );
42                    if ( term.length < 2 ) {
43                        return false;
44                    }
45                },
46                focus: function() {
47                    // prevent value inserted on focus
48                    return false;
49                },
50                select: function( event, ui ) {
51                    var terms = split( this.value );
52                    // remove the current input
53                    terms.pop();
54                    // add the selected item
55                    terms.push( ui.item.value );
56                    // add placeholder to get the comma-and-space at the end
57                    terms.push( "" );
58                    this.value = terms.join( ", " );
59                    return false;
60                }
61            });
62    });
63    </script>
64</head>
65<body>
66
67<div class="demo">
68
69<div class="ui-widget">
70    <label for="birds">Birds: </label>
71    <input id="birds" size="50" />
72</div>
73
74</div><!-- End demo -->
75
76
77
78<div class="demo-description">
79<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
80<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
81</div><!-- End demo-description -->
82
83</body>
84</html>
Note: See TracBrowser for help on using the browser.