AutoSuggestWidget

Version 3.1 by ElenaOanaTabaranu on 2009/07/06
Warning: For security reasons, the document is displayed in restricted mode as it is not the current version. There may be differences and errors due to this.

AutoSuggest Widget

Failed to execute the [velocity] macro. Cause: [The execution of the [velocity] script macro is not allowed in [xwiki:Documentation.DevGuide.FrontendResources.AutoSuggestWidget.WebHome]. Check the rights of its last author or the parameters if it's rendered from another script.]. Click on this message for details.

This is a Javascript widget bundled by default with the XWiki platform

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("Tutorials.AjaxSuggestExample")
<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 Tutorials.AjaxSuggestExample 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
})();

Javascript parameters for the ajaxsuggest class

ParameterDetails
mincharsThe minimum number of characters after which to trigger the suggest. Default value is 1.
getThe HTTP method for the AJAX request.
varnameThe name of the request parameter holding the input stub. Default value is input.
classNameThe CSS classname of the suggest list. Default value is ajaxsuggest.
timeoutDefault value is 2500.
delayDefault value is 500.
offsetyDefault value is -5.
shownoresultsDisplay a "no results" message, or simply hide the suggest box when no suggestions are available.
noresultsDefault displayed message is No results!.
maxheightDefault value is 250.
cacheDefault value is false.
sepsDefault value is "".
resultsParameterThe name of the JSON variable or XML element holding the results.Default value is results for the old suggest, searchResults for the REST search.
resultIdThe 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.
resultValueThe name of the JSON parameter or XML attribute holding the result value.Default value for the old suggest, pageFullName for the REST page search.
resultInfoThe 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.
parentContainerThe id of the element that will hold the suggest element. Default value is body.
scriptUrl to manage the ajax request.

Options for the script parameter:

OptionDetails
xpageMust use xpage=suggest because suggest.vm template is used to manage the request.
classnameThe name of the class for the elements of the suggest list.
fieldnameThe field name from the class considered for the suggest list.
firColFirst column of the list of results.
secColSecond column of the list of results.

Live Example

Tips

  • Check out the Javascript code for more details: http://localhost:8080/xwiki/resources/js/xwiki/suggest/ajaxSuggest.js.
   

Get Connected