Wiki source code of AutoSuggestWidget
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | 1 AutoSuggest Widget |
| 2 | |||
| 3 | #startfloatingbox() | ||
| 4 | *Contents* | ||
| 5 | #toc ("2" "2" "") | ||
| 6 | #endfloatingbox() | ||
| 7 | |||
| |
21.1 | 8 | #info("This is a Javascript widget bundled by default with the XWiki platform.") |
| |
1.1 | 9 | |
| 10 | |||
| 11 | 1.1 Usage | ||
| 12 | |||
| |
14.1 | 13 | The suggest widget can be triggered when typing something in a text field. The suggested list can contain field values from a class defined in your wiki or any custom information you provide. |
| 14 | |||
| 15 | 1.1.1 Suggest fields from a class defined in the wiki | ||
| 16 | |||
| 17 | Use information from a predefined class in your wiki (e.g. *XWiki.TagClass*, *XWiki.XWikiUsers*, etc.) or from a class defined by yourself. | ||
| 18 | For example, use *XWiki.TagClass* to suggest tags from the wiki tag cloud: | ||
| 19 | |||
| |
7.1 | 20 | {image:suggest.png|document=DevGuide.AutoSuggestWidget} |
| |
1.1 | 21 | {code} |
| 22 | |||
| |
7.1 | 23 | $!xwiki.jsx.use("DevGuide.AutoSuggestWidgetExample") |
| |
1.1 | 24 | <form method="post" action="#"> |
| 25 | <label for="myinput">Type the name of a tag and test the suggest list:</label> | ||
| 26 | <input id="myinput" size="20" type="text" value=""/> | ||
| 27 | </form> | ||
| 28 | |||
| 29 | {code} | ||
| 30 | |||
| |
7.1 | 31 | The *JavascriptExtension* object from the *DevGuide.AutoSuggestWidgetExample* page contains the Javascript code to enable the widget when focusing on the text field: |
| |
1.1 | 32 | |
| 33 | {code} | ||
| 34 | (function(){ | ||
| 35 | document.observe('dom:loaded', function () { | ||
| 36 | if($('myinput')) { | ||
| 37 | Event.observe($('myinput'), "focus", function() { | ||
 |
34.1 | 38 | new XWiki.widgets.Suggest(this, { |
| 39 | script: '$xwiki.getURL("${doc.space}.WebHome", "view")?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&secCol=-&', | ||
| 40 | varname: "input", | ||
| 41 | seps: " ,|", | ||
| 42 | offsety: 13 | ||
| 43 | }); | ||
| |
1.1 | 44 | }); |
| 45 | } | ||
| 46 | }); // end of doc observe | ||
| 47 | })(); | ||
| 48 | {code} | ||
| 49 | |||
| |
17.1 | 50 | 1.1.1.1 Options used in the *suggest.vm* template: |
| 51 | |||
| 52 | {table} | ||
| 53 | Option|Details | ||
| 54 | xpage|Must use *xpage=suggest* because suggest.vm template is used to manage the request. | ||
| 55 | classname|The name of the class for the elements of the suggest list. | ||
| 56 | fieldname|The field name from the class considered for the suggest list. | ||
| 57 | firCol|First column of the list of results. | ||
| 58 | 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. | ||
| 59 | {table} | ||
| 60 | |||
| |
18.1 | 61 | 1.1.1.1 Example |
| |
17.1 | 62 | |
| |
18.1 | 63 | * Check out the example for class field values at [Class Field Example>DevGuide.AutoSuggestWidgetExample] |
| 64 | |||
| |
14.1 | 65 | 1.1.1 Suggest custom information |
| |
1.1 | 66 | |
| |
14.1 | 67 | When the information you want to suggest is not available through a class field or you generate it using a custom query, you need to create a service (plain wiki page called with *xpage=plain* parameter in the url) that maps your results to the *xml* input accepted by the *autosuggest* class. |
| 68 | For example, you can build a list of suggestions that contains the wiki page names within a certain space: | ||
| |
30.1 | 69 | |
| |
28.1 | 70 | {image:customsuggest.png|document=DevGuide.AutoSuggestWidget} |
| |
26.1 | 71 | |
| |
14.1 | 72 | {code} |
| 73 | |||
| |
15.1 | 74 | $!xwiki.jsx.use("DevGuide.AjaxSuggestCustomExample") |
| |
14.1 | 75 | <form method="post" action="#"> |
| |
19.1 | 76 | <label for="myinput">Type the name of an example page from the *DevGuide* space and test the suggest list:</label> |
| |
31.1 | 77 | <input id="myinput_suggest" size="20" type="text" value=""/> |
| 78 | <input id="myinput" type="hidden" /> | ||
| 79 | <input id="mybutton" type="button" value="Go" /><br/> | ||
| |
14.1 | 80 | </form> |
| 81 | |||
| 82 | {code} | ||
| 83 | |||
| 84 | The *JavascriptExtension* object from the *DevGuide.AjaxSuggestCustomExample* page contains the Javascript code to enable the widget when focusing on the text field. Also, the *script* option uses the url for the results page. | ||
| 85 | |||
| 86 | {code} | ||
| 87 | (function(){ | ||
| 88 | document.observe('dom:loaded', function () { | ||
| |
31.1 | 89 | if($('myinput_suggest')) { |
| 90 | Event.observe($('myinput_suggest'), "focus", function() { | ||
| |
34.1 | 91 | new XWiki.widgets.Suggest(this, { |
| |
33.1 | 92 | script: "$xwiki.getURL("DevGuide.SuggestService", "view", "xpage=plain&spacename=DevGuide")&", |
| 93 | varname: "input", | ||
| 94 | seps: " ,|", | ||
| 95 | offsety: 13, | ||
| 96 | minchars: 3 | ||
| 97 | }); | ||
| |
14.1 | 98 | }); |
| 99 | } | ||
| |
32.1 | 100 | if($('mybutton')) { |
| 101 | Event.observe($('mybutton'), "click", function() { | ||
| 102 | location.href = $('myinput').value; | ||
| 103 | }); | ||
| 104 | } | ||
| |
14.1 | 105 | }); // end of doc observe |
| 106 | })(); | ||
| 107 | {code} | ||
| 108 | The service page uses a query to get all the pages from the space provided using *spacename* parameter in the url. The generated response must be a *xml* file that has *<results>* as a root node and *<rs>* as children. | ||
| 109 | {code} | ||
| 110 | ## | ||
| 111 | ## Service to generate the suggest list of files from a certain space. | ||
| 112 | ## @spacename | ||
| 113 | ## @input | ||
| 114 | ## | ||
| 115 | #set($input = $request.get("input").toLowerCase()) | ||
| 116 | #set($spacename = $request.get("spacename")) | ||
| 117 | $response.setContentType("text/xml") ## generate a xml file | ||
| 118 | ## select pages | ||
| 119 | #if("$!input" == "") | ||
| |
31.1 | 120 | #set($query = "where doc.space='$spacename' and doc.name<>'WebHome' and doc.name<>'WebPreferences' order by doc.date desc") |
| |
14.1 | 121 | #else |
| |
31.1 | 122 | #set($query = "where doc.space='$spacename' and doc.name<>'WebHome' and doc.name<>'WebPreferences' and lower(doc.name) like '%" + $input + "%' order by doc.date desc") |
| |
14.1 | 123 | #end |
| |
31.1 | 124 | #set($searchresults = $xwiki.searchDocuments($query, 30, 0)) |
| |
14.1 | 125 | <results space="$spacename"> |
| 126 | #foreach($result in $searchresults) | ||
| |
31.1 | 127 | #set($resultDoc = $xwiki.getDocument($result)) |
| 128 | #set($resultDocName = $resultDoc.name) | ||
| 129 | #set($resultDocURL = $resultDoc.getURL()) | ||
| 130 | <rs id="1" info="$resultDocURL">$resultDocName</rs> | ||
| |
14.1 | 131 | #end |
| 132 | </results> | ||
| 133 | {code} | ||
| |
17.1 | 134 | |
| |
22.1 | 135 | |
| |
18.1 | 136 | 1.1.1.1 Example |
| 137 | |||
| 138 | * Check out the example for custom information at [Custom Information Example>DevGuide.AjaxSuggestCustomExample] | ||
| 139 | |||
| |
1.1 | 140 | 1.1 Javascript parameters for the *ajaxsuggest* class |
| 141 | |||
| 142 | {table} | ||
| 143 | Parameter|Details | ||
| 144 | minchars|The minimum number of characters after which to trigger the suggest. Default value is 1. | ||
| 145 | get|The HTTP method for the AJAX request. | ||
| 146 | varname| The name of the request parameter holding the input stub. Default value is *input*. | ||
| 147 | className| The CSS classname of the suggest list. Default value is *ajaxsuggest*. | ||
| 148 | timeout|Default value is *2500*. | ||
| 149 | delay|Default value is *500*. | ||
| 150 | offsety|Default value is *-5*. | ||
| 151 | shownoresults|Display a "no results" message, or simply hide the suggest box when no suggestions are available. | ||
| 152 | noresults|Default displayed message is *No results!*. | ||
| 153 | maxheight|Default value is *250*. | ||
| 154 | cache|Default value is *false*. | ||
| 155 | seps|Default value is "". | ||
| 156 | 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. | ||
| 157 | 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. | ||
| 158 | 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. | ||
| 159 | 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. | ||
| 160 | parentContainer|The id of the element that will hold the suggest element. Default value is *body*. | ||
| |
14.1 | 161 | script|Url for the ajax request that will get the suggested list. Must end with *&* because *varname* parameter will be appended. Use *suggest.vm* to get field values from a wiki class or a custom url to generate the suggested list. |
| |
1.1 | 162 | {table} |
| 163 | |||
| 164 | |||
| 165 | 1.1 Tips | ||
| 166 | |||
| 167 | * Check out the Javascript code for more details: *{pre}http://localhost:8080/xwiki/resources/js/xwiki/suggest/ajaxSuggest.js {/pre}*. |
