source: MILK/trunk/milk_server/milk_server/templates/vocabsearch/vocabsearch.html @ 5201

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/MILK/trunk/milk_server/milk_server/templates/vocabsearch/vocabsearch.html@5201
Revision 5201, 2.1 KB checked in by cbyrom, 11 years ago (diff)

Add functionality to allow vocab term searches to be done via an
ajax enabled, autocomplete text input. Add new controller and template
packages for this as well as javascript and style sheets. Also update
routing and add (commented out) example of usage in layout + add
documentation on how to use.

Line 
1<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
2        xmlns:py="http://genshi.edgewall.org/" 
3        xmlns:xi="http://www.w3.org/2001/XInclude" py:strip="">
4        <xi:include href="../utils.html" />
5
6        <div py:def="vocabSearchAutoComplete()">
7
8                <link rel="stylesheet" type="text/css" href="$g.server/js/yui/autocomplete/assets/skins/sam/autocomplete.css" />
9                <script type="text/javascript" src="$g.server/js/yui/yahoo-dom-event/yahoo-dom-event.js" />
10                <script type="text/javascript" src="$g.server/js/yui/connection/connection-min.js" />
11                <script type="text/javascript" src="$g.server/js/yui/animation/animation-min.js" />
12                <!-- NB, the yui code in the MILK codebase doesn't work for the following two scripts, so get these from the main yahoo site -->
13                <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
14                <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/autocomplete/autocomplete-min.js"></script>
15                <link href="$g.server/layout/style/autocomplete.css" rel="stylesheet" type="text/css" />
16                <table class="yui-skin-sam">
17                <tr>
18                        <th>Vocab Term:<span py:replace="helpIcon('vts_help', 'div')"/>&nbsp;</th>
19                        <td>
20                                <div id="myAutoComplete">
21                                <input id="myInput" type="text" >type in some text here to search for vocab terms</input>
22                                <div id="myContainer" />
23                                </div>
24                        </td>
25                </tr>
26                </table>
27            <div id="vts_help" class="hidden">
28            <div class="helptxt"><p> 
29            This input is an autocomplete text box; after you've typed the first two letters of the
30            term to be used, it will start to query the vocab server and present a list of matching
31            options.  At this point, you can either select from the list, or narrow the selections by
32            typing further.  NB, only inputs that correspond to valid names retrieved from the server
33            are allowed as inputs in this box.  Note, it is possible to use the wildcard, '*' to match
34            multiple letters.
35            </p></div>
36            </div>
37                <script src="$g.server/js/autocomplete.js" type="text/javascript" charset="utf-8" />
38        </div>
39</html>
Note: See TracBrowser for help on using the repository browser.