I have a Ajax script (like Google-suggest).
It searches result and when user clicks on result, it prefills search box.
I'd like to add:
- allowance for some .gif file showing user that search is being done (in case it is longer)
- notify user that search was completed with no result (nothing found)
- allowance for redirecting to searched page, when result is clicked by user, not only pre-filling search box (which requires additional click on "search")
## Deliverables
Here are 3 Ajax script elements (useful to set it up for adding required in this project elements).
Also there is one attached file, which is a part of the whole thing, but should not be used for change.
* * *
1. section implemented where search-box is located:
<form name="quick_find" action="search">
<input class="formAjaxCategories" type="text" id="keywords" name="keywords" value="" onKeyUp="ajax_showOptions(this,'getProductsByLetters',event,'[login to view URL]',170,-21,3,'')" autocomplete="off" maxlength="20" style="width: 120";>
<input type="hidden" id="keywords_hidden" name="keywordsID"> <!--the search subject will be inserted into this hidden input -->
<input type="submit" value="Submit">
</form>
* * *
2. [login to view URL] file used to perform database search
if(isset($_GET['getChangesByLetters']) && isset($_GET['letters']))
{
$letters = $_GET['letters'];
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
//editable region below
$res_query = tep_db_query("select data, more_data from " .TABLE_SAMPLE."
where some_data like '%".$letters."%' GROUP BY more_data");
while ($res = tep_db_fetch_array($res_query))
{
echo $res["keyword"]."###".$res["more_data"]."|";
}
//editable region above jp_product_name_reshaped_with_model_pID($res["products_id"])
}
info:
$res["keyword"] - used for display search
$res["more_data"] - used to display in Ajax drop-down box next to search-box
* * *
3. . [login to view URL] - second required file
var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;
var ajax_list_MSIE = false;
if([login to view URL]('MSIE')>=0 && [login to view URL]('Opera')<0)ajax_list_MSIE=true;
var currentListIndex = 0;
function ajax_getTopPos(inputObj)
{
var returnValue = [login to view URL];
while((inputObj = [login to view URL]) != null){
returnValue += [login to view URL];
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}
function ajax_getLeftPos(inputObj)
{
var returnValue = [login to view URL];
while((inputObj = [login to view URL]) != null)returnValue += [login to view URL];
return returnValue;
}
function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = [login to view URL];
if(ajax_list_MSIE)tmpValue = [login to view URL];else tmpValue = [login to view URL];
if(!tmpValue)tmpValue = [login to view URL];
[login to view URL] = tmpValue;
/////jp[]////////////////////////////////////////////////////////////////////////////
// if([login to view URL]([login to view URL] + '_hidden'))[login to view URL]([login to view URL]).value = [login to view URL];
if([login to view URL]([login to view URL] + '_hidden'))[login to view URL]([login to view URL] + '_hidden').value = [login to view URL];
if([login to view URL]([login to view URL] + '_not_hidden'))[login to view URL]([login to view URL]).value = [login to view URL];
/////////////////////////////////////////////////////////////////////////////////
ajax_options_hide();
}
function ajax_options_hide()
{
if(ajax_optionDiv)ajax_optionDiv.style.display='none';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='none';
}
function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.className='optionDiv';
item.className='optionDivSelected';
ajax_list_activeItem = item;
if(fromKeyBoard){
if([login to view URL]>[login to view URL]){
[login to view URL] = [login to view URL] - [login to view URL] + [login to view URL] + 2 ;
}
if([login to view URL]<[login to view URL])
{
[login to view URL] = 0;
}
}
}
function ajax_option_list_buildList(letters,paramToExternalFile)
{
[login to view URL] = '';
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][[login to view URL]()].length<=1){
ajax_options_hide();
return;
}
ajax_list_optionDivFirstItem = false;
var optionsAdded = false;
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][[login to view URL]()].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][[login to view URL]()][no].length==0)continue;
optionsAdded = true;
var div = [login to view URL]('DIV');
var items = ajax_list_cachedLists[paramToExternalFile][[login to view URL]()][no].split(/###/gi);
if(ajax_list_cachedLists[paramToExternalFile][[login to view URL]()].length==1 && [login to view URL] == items[0]){
ajax_options_hide();
return;
}
[login to view URL] = items[items.length-1];
[login to view URL] = items[0];
div.className='optionDiv';
[login to view URL] = function(){ ajax_options_rollOverActiveItem(this,false) }
[login to view URL] = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;
[login to view URL](div);
}
if(optionsAdded){
ajax_optionDiv.style.display='block';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='';
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}
}
function ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,whichIndex)
{
if(whichIndex!=currentListIndex)return;
var letters = [login to view URL];
var content = ajax_list_objects[ajaxIndex].response;
var elements = [login to view URL]('|');
ajax_list_cachedLists[paramToExternalFile][[login to view URL]()] = elements;
ajax_option_list_buildList(letters,paramToExternalFile);
}
function ajax_option_resize(inputObj)
{
var ajaxBox_offsetX = 0; //X axis offset of prefetch drop-down
var ajaxBox_offsetY = 0; //Y axis offset of prefetch drop-down
[login to view URL] = (ajax_getTopPos(inputObj) + [login to view URL] + ajaxBox_offsetY) + 'px';
[login to view URL] = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
[login to view URL] = [login to view URL];
[login to view URL] = [login to view URL];
}
}
function ajax_showOptions(inputObj,paramToExternalFile,e,ajax_list_externalFile,ajaxBox_offsetX,ajaxBox_offsetY,min_input,stID)
{
if(e.keyCode==13 || e.keyCode==9)return;
if(ajax_list_currentLetters[[login to view URL]]==[login to view URL])return;
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();
ajax_list_currentLetters[[login to view URL]] = [login to view URL];
if(!ajax_optionDiv){
ajax_optionDiv = [login to view URL]('DIV');
[login to view URL] = 'ajax_listOfOptions';
[login to view URL](ajax_optionDiv);
if(ajax_list_MSIE){
ajax_optionDiv_iframe = [login to view URL]('IFRAME');
ajax_optionDiv_iframe.border='0';
[login to view URL] = [login to view URL] + 'px';
[login to view URL] = [login to view URL] + 'px';
[login to view URL] = 'ajax_listOfOptions_iframe';
[login to view URL](ajax_optionDiv_iframe);
}
var allInputs = [login to view URL]('INPUT');
for(var no=0;no<[login to view URL];no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
}
var allSelects = [login to view URL]('SELECT');
for(var no=0;no<[login to view URL];no++){
allSelects[no].onfocus = ajax_options_hide;
}
var oldonkeydown=[login to view URL];
if(typeof oldonkeydown!='function'){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation() ;}
}
var oldonresize=[login to view URL];
if(typeof oldonresize!='function'){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj) ;}
}
}
if([login to view URL]<min_input){
ajax_options_hide();
return;
}
[login to view URL] = (ajax_getTopPos(inputObj) + [login to view URL] + ajaxBox_offsetY) + 'px';
[login to view URL] = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
[login to view URL] = [login to view URL];
[login to view URL] = [login to view URL];
}
ajax_list_activeInput = inputObj;
[login to view URL] = ajax_list_cancelEvent;
currentListIndex++;
if(ajax_list_cachedLists[paramToExternalFile][[login to view URL]()]){
ajax_option_list_buildList([login to view URL],paramToExternalFile,currentListIndex);
}else{
var tmpIndex=currentListIndex/1;
[login to view URL] = '';
var ajaxIndex = [login to view URL];
ajax_list_objects[ajaxIndex] = new sack();
var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&stID=' + stID + '&letters=' + [login to view URL](" ","+");
ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get
ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); }; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX(); // Execute AJAX function
}
}
function ajax_option_keyNavigation(e)
{
if([login to view URL])e = event;
if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display=='none')return;
if(e.keyCode==38){ // Up arrow
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem && ![login to view URL])return;
ajax_options_rollOverActiveItem([login to view URL],true);
}
if(e.keyCode==40){ // Down arrow
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}else{
if(![login to view URL])return;
ajax_options_rollOverActiveItem([login to view URL],true);
}
}
if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key
if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){ // Escape key
ajax_options_hide();
}
}
[login to view URL] = autoHideList;
function autoHideList(e)
{
if([login to view URL])e = event;
if ([login to view URL]) source = [login to view URL];
else if ([login to view URL]) source = [login to view URL];
if ([login to view URL] == 3) // defeat Safari bug
source = [login to view URL];
if([login to view URL]()!='input' && [login to view URL]()!='textarea')ajax_options_hide();
}
====
end