Wiki source code of AutoSuggestWidget

Version 11.1 by ElenaOanaTabaranu on 2009/07/17

Hide last authors
ElenaOanaTabaranu 1.1 1
2
3
4 1 AutoSuggest Widget
5
6 #startfloatingbox()
7 *Contents*
8 #toc ("2" "2" "")
9 #endfloatingbox()
10
11 #info("This is a Javascript widget bundled by default with the XWiki platform")
12
13
14 1.1 Usage
15
16 The suggest widget can be triggered when typing something in a text field. For example, it can suggest tags from the wiki tag cloud:
ElenaOanaTabaranu 7.1 17 {image:suggest.png|document=DevGuide.AutoSuggestWidget}
ElenaOanaTabaranu 1.1 18 {code}
19
ElenaOanaTabaranu 7.1 20 $!xwiki.jsx.use("DevGuide.AutoSuggestWidgetExample")
ElenaOanaTabaranu 1.1 21 <form method="post" action="#">
22 <label for="myinput">Type the name of a tag and test the suggest list:</label>
23 <input id="myinput" size="20" type="text" value=""/>
24 </form>
25
26 {code}
27
ElenaOanaTabaranu 7.1 28 The *JavascriptExtension* object from the *DevGuide.AutoSuggestWidgetExample* page contains the Javascript code to enable the widget when focusing on the text field:
ElenaOanaTabaranu 1.1 29
30 {code}
31 (function(){
32
33 document.observe('dom:loaded', function () {
34 if($('myinput')) {
35 Event.observe($('myinput'), "focus", function() {
ElenaOanaTabaranu 11.1 36 new ajaxSuggest(this, {script: "/xwiki/bin/view/Main/?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&secCol=-&", varname: "input", seps: " ,|", offsety: 13});
ElenaOanaTabaranu 1.1 37 });
38 }
39 }); // end of doc observe
40 })();
41 {code}
42
43
44 1.1 Javascript parameters for the *ajaxsuggest* class
45
46 {table}
47 Parameter|Details
48 minchars|The minimum number of characters after which to trigger the suggest. Default value is 1.
49 get|The HTTP method for the AJAX request.
50 varname| The name of the request parameter holding the input stub. Default value is *input*.
51 className| The CSS classname of the suggest list. Default value is *ajaxsuggest*.
52 timeout|Default value is *2500*.
53 delay|Default value is *500*.
54 offsety|Default value is *-5*.
55 shownoresults|Display a "no results" message, or simply hide the suggest box when no suggestions are available.
56 noresults|Default displayed message is *No results!*.
57 maxheight|Default value is *250*.
58 cache|Default value is *false*.
59 seps|Default value is "".
60 resultsParameter|The name of the JSON variable or XML element holding the results.Default value is *results* for the old suggest, *searchResults* for the REST search.
61 resultId|The name of the JSON parameter or XML attribute holding the result identifier. DEfault value is *id* for both the old suggest and the REST search.
62 resultValue|The name of the JSON parameter or XML attribute holding the result value.Default *value* for the old suggest, *pageFullName* for the REST page search.
63 resultInfo|The name of the JSON parameter or XML attribute holding the result auxiliary information. Default value is *info* for the old suggest, *pageFullName* for the REST search.
64 parentContainer|The id of the element that will hold the suggest element. Default value is *body*.
65 script|Url to manage the ajax request.
66 {table}
67
68 1.1.1 Options for the *script* parameter:
69
70 {table}
71 Option|Details
72 xpage|Must use *xpage=suggest* because suggest.vm template is used to manage the request.
73 classname|The name of the class for the elements of the suggest list.
74 fieldname|The field name from the class considered for the suggest list.
ElenaOanaTabaranu 9.1 75 firCol|First column of the list of results.
ElenaOanaTabaranu 11.1 76 secCol|Second column of the list of results. For a user defined query, use *-* value for one column and no hidden input. Otherwise the list of results will have two columns and a hidden input.
ElenaOanaTabaranu 1.1 77 {table}
78
79
ElenaOanaTabaranu 3.1 80 1.1 Live Example
ElenaOanaTabaranu 1.1 81
ElenaOanaTabaranu 3.1 82 * Check out the example above at [Ajax Suggest Example>DevGuide.AutoSuggestWidgetExample]
ElenaOanaTabaranu 1.1 83
84 1.1 Tips
85
86 * Check out the Javascript code for more details: *{pre}http://localhost:8080/xwiki/resources/js/xwiki/suggest/ajaxSuggest.js {/pre}*.

Get Connected