Wiki source code of AutoSuggestWidget
Version 6.1 by ElenaOanaTabaranu on 2009/07/06
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 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: | ||
| 17 | {code} | ||
| 18 | |||
| 19 | $!xwiki.jsx.use("Tutorials.AjaxSuggestExample") | ||
| 20 | <form method="post" action="#"> | ||
| 21 | <label for="myinput">Type the name of a tag and test the suggest list:</label> | ||
| 22 | <input id="myinput" size="20" type="text" value=""/> | ||
| 23 | </form> | ||
| 24 | |||
| 25 | {code} | ||
| 26 | |||
| 27 | The *JavascriptExtension* object from the *Tutorials.AjaxSuggestExample* page contains the Javascript code to enable the widget when focusing on the text field: | ||
| 28 | |||
| 29 | {code} | ||
| 30 | (function(){ | ||
| 31 | |||
| 32 | document.observe('dom:loaded', function () { | ||
| 33 | if($('myinput')) { | ||
| 34 | Event.observe($('myinput'), "focus", function() { | ||
| 35 | new ajaxSuggest(this, {script: "/xwiki/bin/view/Main/?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&firCol=-&secCol=-&", varname: "input", seps: " ,|", offsety: 13}); | ||
| 36 | }); | ||
| 37 | } | ||
| 38 | }); // end of doc observe | ||
| 39 | })(); | ||
| 40 | {code} | ||
| 41 | |||
| 42 | |||
| 43 | 1.1 Javascript parameters for the *ajaxsuggest* class | ||
| 44 | |||
| 45 | {table} | ||
| 46 | Parameter|Details | ||
| 47 | minchars|The minimum number of characters after which to trigger the suggest. Default value is 1. | ||
| 48 | get|The HTTP method for the AJAX request. | ||
| 49 | varname| The name of the request parameter holding the input stub. Default value is *input*. | ||
| 50 | className| The CSS classname of the suggest list. Default value is *ajaxsuggest*. | ||
| 51 | timeout|Default value is *2500*. | ||
| 52 | delay|Default value is *500*. | ||
| 53 | offsety|Default value is *-5*. | ||
| 54 | shownoresults|Display a "no results" message, or simply hide the suggest box when no suggestions are available. | ||
| 55 | noresults|Default displayed message is *No results!*. | ||
| 56 | maxheight|Default value is *250*. | ||
| 57 | cache|Default value is *false*. | ||
| 58 | seps|Default value is "". | ||
| 59 | 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. | ||
| 60 | 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. | ||
| 61 | 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. | ||
| 62 | 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. | ||
| 63 | parentContainer|The id of the element that will hold the suggest element. Default value is *body*. | ||
| 64 | script|Url to manage the ajax request. | ||
| 65 | {table} | ||
| 66 | |||
| 67 | 1.1.1 Options for the *script* parameter: | ||
| 68 | |||
| 69 | {table} | ||
| 70 | Option|Details | ||
| 71 | xpage|Must use *xpage=suggest* because suggest.vm template is used to manage the request. | ||
| 72 | classname|The name of the class for the elements of the suggest list. | ||
| 73 | fieldname|The field name from the class considered for the suggest list. | ||
| 74 | firCol|First column of the list of results. | ||
| 75 | secCol|Second column of the list of results. | ||
| 76 | {table} | ||
| 77 | |||
| 78 | |||
| 79 | 1.1 Live Example | ||
| 80 | |||
| 81 | * Check out the example above at [Ajax Suggest Example>DevGuide.AutoSuggestWidgetExample] | ||
| 82 | |||
| 83 | 1.1 Tips | ||
| 84 | |||
| 85 | * Check out the Javascript code for more details: *{pre}http://localhost:8080/xwiki/resources/js/xwiki/suggest/ajaxSuggest.js {/pre}*. |
