<div style="white-space: nowrap; padding-left: 0px;">
<input style="position: relative; z-index: 100;" autocomplete="off" type="text" id="search" name="search" value="try it out yourself!" />
</div>
<div id="search_results"></div>
<script type="text/javascript">
var oS = new Search('oS', 'search');
// i chose to start focus in the input
document.getElementById('search').focus();
</script>
Give the name of the object you are passing in and the name of the input field ID you are pulling from
when you instantiate the search object.
I have it set to scroll if more than 5 results are found. Try searching for "e" to see it.
NOTE: This demo is using Robstar's tmaj.js for Ajax calls. Currently pulling from a static XML file.
here's the AJAX Stuff:
/************************************************************************
* Custom section for setting up what data you are searching
* and what happens on selection
************************************************************************/
/**
* Perform the search
* @param string search string
*/
this.search = function (sInput)
{
var reqn = tmAJqueryBackend( 'search.xml',
function(n, response) {
self.processSearchData(n, response, sInput); } );
}
/**
* process the search input string
* @param int tmaj number
* @param obj XMLresponse
* @param string search input string
*/
this.processSearchData = function (n, response, sInput)
{
if (!checkXML(response)) return;
self.oSearch = Object();
self.aSearchIndex = Array();
self.clearActiveSearch();
var itemsXML = response.getElementsByTagName('item');
var oSearches = new Object();
for (var i = 0; i < itemsXML.length; i++)
{
var nId = (itemsXML[i].getElementsByTagName('id')[0].hasChildNodes()) ? itemsXML[i].getElementsByTagName('id')[0].firstChild.data : '';
oSearches[nId] = new Object();
oSearches[nId]['name'] = (itemsXML[i].getElementsByTagName('name')[0].hasChildNodes()) ? itemsXML[i].getElementsByTagName('name')[0].firstChild.data : '';
}
if (!sInput) var sInput = '';
if (sInput.length > 0)
{
var sTrimInput = trimString(sInput);
// escape meta regex characters
var sEscapeInput = sTrimInput.replace(/(\(|\)|\-|\[|\]|\<|\>|\{|\}|\.|\||\^|\$|\*|\+|\?|\&|\\)/g, '\\$1');
// set up the regex for names
var sNamePattern = '(' + sEscapeInput + ')';
var nameReg = new RegExp(sNamePattern, 'i');
// run the search on the keys
for (var key in oSearches)
{
if (oSearches[key] && oSearches[key] != null)
{
if (nameReg.test(oSearches[key]['name']))
{
self.oSearch[key] = new Object();
self.oSearch[key]['name'] = oSearches[key]['name'];
self.aSearchIndex.push(key);
// oSearch[key]['name'] = oSearches[key]['name'].replace(nameReg, '<span class="highlight">$1</span>');
}
}
}
if (self.aSearchIndex.length > 0) self.setSort();
self.drawSearch();
}
else
{
self.clearSearch();
}
}