JAS script and required scripts
JavaScript
<?=JAS::JavaScriptS();?><script type="text/javascript" src="script/functions.js"></script>
<script type="text/javascript" src="script/http.js"></script>
<script type="text/javascript" src="script/search.js"></script>
Now the next step is to put a search form on your page. You'll need an element with the an input with the "_searchOptions" which contains the various options (see below) for the inline search and a text input field after that:
Search form
HTML
<form><div><input type="hidden" name="_searchOptions" value="request=data;module=categories;field=name;extra=title">
<input type="text" placeholder="Search" autocomplete="off">
<input type="submit" value="Search">
</div></form>
This should show some inline results... that is if you've nicely enabled your XML API to allow searching on categories. Anyway the results will look like quite messy, so time for some style sheet magic:
Inline search styling
CSS
div.search ul.results{
/* the list of search results */
z-index: 100;
opacity: 0.9;
background-color: white;
}
div.search ul.results li
{
/* the individual options */
cursor: pointer;
padding: 5px 10px 5px 10px;
color: black;
border-bottom: 1px solid black;
}
div.search ul.results li.selected
{
/* the current selected option (done by pressing up and down) */
color: green;
border-bottom: 1px solid green;
}
div.search ul.results li:hover
{
/* the current option under the mouse cursor */
color: blue;
border-bottom: 1px solid blue;
}
div.search ul.results li.loading
{
/* displayed when the search is loading the results */
cursor: auto;
color: gray;
border-bottom: 1px solid gray;
}
Options
The "_searchOptions" is a ; (semi-colon) separated key=value pair list of options, which allows you to specify which data to search for. The request option specifies the type of information that should be displayed. This can be either projects, modules, plugins or data. Depending on which request type is done the other options vary.Projects, Modules and Plugins
This will request either the projects as available in the current installation, the modules in the current selected project and the plugins in the project. The following search options can be specified:- prefix: the prefix that is applied to filtering the result list,
e.g. "request=modules;prefix=config" will only show the modules that start with "config". - suffix: the suffix that is applied to filtering the result list,
e.g. "request=modules;suffix=pluginConfigs" will only show the modules that end with "pluginsConfigs".
Data
This will request data from the provided module and then display the matching result based on the specified field. The following search options must be specified:- module: the module that should be used for gathering the search results
- field: the field of the module that is used for displaying the results
- extra: the extra search action that will be used for searching the data, this can be either:
- title: searches all fields with a title property
- show: searches the field that's also used for displaying
- full: searches all database fields
- index: searches all full text indexes
- deleted: searches all database fields of all deleted items