AutoSuggest Widget
ContentsThe [toc] macro is a standalone macro and it cannot be used inline. Click on this message for details.
Usage
The suggest widget can be triggered when typing something in a text field. For example, it can suggest tags from the wiki tag cloud: 
$!xwiki.jsx.use("DevGuide.AutoSuggestWidgetExample")
<form method="post" action="#">
<label for="myinput">Type the name of a tag and test the suggest list:</label>
<input id="myinput" size="20" type="text" value=""/>
</form>
<form method="post" action="#">
<label for="myinput">Type the name of a tag and test the suggest list:</label>
<input id="myinput" size="20" type="text" value=""/>
</form>
The JavascriptExtension object from the DevGuide.AutoSuggestWidgetExample page contains the Javascript code to enable the widget when focusing on the text field:
(function(){
document.observe('dom:loaded', function () {
if($('myinput')) {
Event.observe($('myinput'), "focus", function() {
new ajaxSuggest(this, {script: "/xwiki/bin/view/Main/?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&firCol=-&secCol=-&", varname: "input", seps: " ,|", offsety: 13});
});
}
}); // end of doc observe
})();
document.observe('dom:loaded', function () {
if($('myinput')) {
Event.observe($('myinput'), "focus", function() {
new ajaxSuggest(this, {script: "/xwiki/bin/view/Main/?xpage=suggest&classname=XWiki.TagClass&fieldname=tags&firCol=-&secCol=-&", varname: "input", seps: " ,|", offsety: 13});
});
}
}); // end of doc observe
})();
Javascript parameters for the ajaxsuggest class
| Parameter | Details |
|---|---|
| minchars | The minimum number of characters after which to trigger the suggest. Default value is 1. |
| get | The HTTP method for the AJAX request. |
| varname | The name of the request parameter holding the input stub. Default value is input. |
| className | The CSS classname of the suggest list. Default value is ajaxsuggest. |
| timeout | Default value is 2500. |
| delay | Default value is 500. |
| offsety | Default value is -5. |
| shownoresults | Display a "no results" message, or simply hide the suggest box when no suggestions are available. |
| noresults | Default displayed message is No results!. |
| maxheight | Default value is 250. |
| cache | Default value is false. |
| seps | Default value is "". |
| 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. |
| 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. |
| 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. |
| 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. |
| parentContainer | The id of the element that will hold the suggest element. Default value is body. |
| script | Url to manage the ajax request. |
Options for the script parameter:
| Option | Details |
|---|---|
| xpage | Must use xpage=suggest because suggest.vm template is used to manage the request. |
| classname | The name of the class for the elements of the suggest list. |
| fieldname | The field name from the class considered for the suggest list. |
| firCol | First column of the list of results. |
| secCol | Second column of the list of results. |
Live Example
- Check out the example above at Ajax Suggest Example
Tips
- Check out the Javascript code for more details: http://localhost:8080/xwiki/resources/js/xwiki/suggest/ajaxSuggest.js.
