Instant Search

[lala rock]

and BTW here is the link to my site https://spares.cncmachinery.com.au

[MikeyG]

I did have a go at that by changing the reference to a different file but it did not seem to work.

I will look again at what I did.... unfortunately I am a small business owner with a programming interest rather than a developer with Jquery or php skills and so my atttempts are more than likely to have missed somethinig or been miss directed. Any clues or pointers to the bits to amend would be gladley welcome.

Thank you in advance.

Mikeyg

[AyoobG]

I did have a go at that by changing the reference to a different file but it did not seem to work.

I will look again at what I did.... unfortunately I am a small business owner with a programming interest rather than a developer with Jquery or php skills and so my atttempts are more than likely to have missed somethinig or been miss directed. Any clues or pointers to the bits to amend would be gladley welcome.

Thank you in advance.

Mikeyg

if you give me a link to your site i will try to locate the problem

[AyoobG]

and BTW here is the link to my site https://spares.cncmachinery.com.au

The words get cut off because the product name is too big to fit into the search box, so infact it gets hidden under the next line.

sometimes you can just about see these words so if you want to show or hide them then you need to increase/decrease the line-height or decrease/increase the height value in instantSearch.css for .resultsContainer a

to sort out the screen resolution problem backup and replace your instantSearch.js with the following:

/**
 * @package Instant Search Results
 * @copyright Copyright Ayoob G 2009-2011
 * @copyright Portions Copyright 2003-2006 The Zen Cart Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */


//This jScript file is used to create our instant search box


//these var's will be used to maintain multiple request
var runningRequest = false;
var request;

//if you want to manually position the result box you can set autoPosition to false
//but make sure to provide the top and left value in instantSearch.css
var autoPosition = true;
var offset_left = 280;
var offset_top = 0;


var inputboxCurrent;

//checks to see if the document has loaded and is ready
$(document).ready(function () {


	//this will apply the instant search feature to all the search boxes
    var inputBox = $('input[name="keyword"]');

	//if you want to add instant search to only a specific box then comment out the var inputBox above
	//and uncomment out the specific search box selector bellow:
	
	//var inputBox = $('#navMainSearch > form[name="quick_find_header"] > input[name="keyword"]');
    //var inputBox = $('#navColumnTwoWrapper > form[name="quick_find_header"] > input[name="keyword"]');
	//var inputBox = $('#searchContent > form[name="quick_find"] > input[name="keyword"]');
	
	
	//this adds a instant search container bellow the search box
	inputBox.before('<div class="resultsContainer" ></div>');
	inputBox.attr('autocomplete', 'off');
	
	//re-position all the instant search container correctly into their places
	if (autoPosition == true){
		inputBox.each(function (index) {
			var offset = $(this).offset();
			$(this).prev().css("left", offset.left + "px");
			$(this).prev().css("top", ($(this).outerHeight(true) + offset.top) + "px");
		});
	}


	//if the search box losses focus, then the instant search container will be hidden
    inputBox.blur(function () {
        if (inputboxCurrent) {
            var resultsContainer = inputboxCurrent.prev();
            resultsContainer.delay(300).slideUp(200);
        }
    });


	//if we resize the browser or zoom in or out of a page then the instant search container will be hidden
	$(window).resize(function() {
        if (inputboxCurrent) {
            var resultsContainer = inputboxCurrent.prev();
            resultsContainer.hide();
        }
	});


	//the user starts to enter a few characters into the search box
    inputBox.keyup(function () {

		//only the currently selected search box will be used
        inputboxCurrent = $(this);

		//assign a variable to the instant search container
        var resultsContainer = $(this).prev();

        //we capture the words that are being typed into the search box
        var searchWord = $(this).val();
		var replaceWord = searchWord;
		
		//we clean up the word for any unnecessary characters or double spaces
        searchWord = searchWord.replace(/^\s+/, "");
        searchWord = searchWord.replace(/  +/g, ' ');

       
        if (searchWord == "") {

            //if the search value entered is empty, we then hide the instant search container	
            resultsContainer.hide();

        } else {

            //if multiple requests are sent to the server, we then abort any previous request, before a new request is sent
			//this only comes in use if user is a fast typer
            if (runningRequest) {
                request.abort();
            }

            runningRequest = true;
           
			//we then pass on the search word to searches.php
			//searches.php will then look for all the search results 
            request = $.getJSON('searches.php', {query: searchWord}, function (data) {
                
				
                if (data.length > 0) {
                    var resultHtml = '';
                    $.each(data, function (i, item) {
						//if any search result are found, a link will be created and placed into the instant search container
                        resultHtml += '<li><a href="' + generateLink(item.pc,item.l) + '"><span class="alignRight" style="border:1px solid #fff;">' + formatNumber(item.c) + '</span>' + highlightWord(replaceWord,item.q) + '</a></li>';
                    });

					
					//fill the container with the matching products and categories
                    resultsContainer.html('<ul><li><span style="font:12px; font-weight:bold; border:1px #fff; position:relative; left:5px; top:9px; ">Quick Search Result</span> <span class="No_text" style="border:1px #fff">No.</span><hr/></li>'+resultHtml+'</ul>');

					
                    if (!resultsContainer.is(':visible')) {
						
						//auto position container if needs be
						if (autoPosition == true){
							autoPositionContainer(inputboxCurrent, resultsContainer);
						}
						
						//drop down instant search box
                        resultsContainer.slideDown(100);
                    }
					
                } else {
                    resultsContainer.hide();

                }

                runningRequest = false;
            });
        }
    });
});

//this function auto positions the container
function autoPositionContainer(inputBoxCurr, resltsContainer){
	var offsetInput = inputBoxCurr.offset();
	var overFlow = offsetInput.left + resltsContainer.outerWidth(true);
	var winWidth = $(document).width();
	
	if (overFlow > winWidth){ // this checks to see if the container overflows on the right of the window
		var dif = overFlow - winWidth;
		
		if ((offsetInput.left - dif) < 0){// this checks to see if the container overflows on the left of the window
			resltsContainer.css("left", 0 + "px");
		}else{
			if (offset_left > 0){
				resltsContainer.css("left", (offsetInput.left - offset_left)  + "px");
			}else{
				resltsContainer.css("left", (offsetInput.left - dif) + "px");
			}
		}
	}else{
		resltsContainer.css("left", (offsetInput.left - offset_left)  + "px");
	}
	resltsContainer.css("top", (inputBoxCurr.outerHeight(true) + offsetInput.top + offset_top) + "px");
}

//this function creates the link back to the matching products or categories
function generateLink(productORcategory, productCategoryID)
{
	var l = "";
	if (productORcategory == "p"){
		l = "index.php?main_page=product_info&products_id=" + productCategoryID;
	}else{
		l = "index.php?main_page=index&cPath=" + productCategoryID;
	}
	
	return l;

}


function highlightWord(findTxt,replaceTxt)
{
	var f = findTxt.toLowerCase();
	var r = replaceTxt.toLowerCase();
	var regex = new RegExp('(' + f + ')', 'i');
	return r.replace(regex, '<span class="thinFont" style="background-color:#f8ee4e; border:1px solid #fff;">' + f + '</span>')
	
}

function formatNumber(num)
{
	return num.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
	
}

then locate and change the values for:

var offset_left = 280;
var offset_top = 0;

and change them to your desired positions i.e if i want my box to be 30px left and 20px top then:

var offset_left = 30;
var offset_top = 20;

[lala rock]

hi thanks a lot! it worked except for one. Why is it the letter being highlighted is cut horizontally? like the letter g and p for instance?. Ive tried to increase the height of .alignRight but it only increases the height but the letter is still cut. Again thanks a lot for your help.

[AyoobG]

hi thanks a lot! it worked except for one. Why is it the letter being highlighted is cut horizontally? like the letter g and p for instance?. Ive tried to increase the height of .alignRight but it only increases the height but the letter is still cut. Again thanks a lot for your help.

Hi,
I now understand what you mean. I was viewing your site in firefox, so i couldn't understand what was going on. The tails get cut of horizontally because the height of the line is small, you will need to open instantSearch.css and increase the height in .resultsContainer a { you will also need to add line-height

Here's a brief explanation of these properties:
height: this controls the height of the line if its small then the words get cut off. if its big, then it looks stupid.
line-height: this controls the line seperation for long product names (i.e product names that can not fit into 1 line)

Change your code from:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:18px;
}

into:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:100%;
line-height:100%;
}

You then have to test different values for both height: and line-height: to see which works best. (if you want to work in pixels then change % into px)

for compatibility you may have to see how it looks in chrome and firefox (a lot of users use these browsers)

[MikeyG]

AyoobG,

Thank you. it currently sits on my testing server at home so not visible to the public. Is it as simple as just making sure each mod points to its own file or once they are loaded are the clashes related to the names of functions etc in the various jquery files being loaded a few times from different versions ( I belive these files get preloaded)

[lala rock]

The words get cut off because the product name is too big to fit into the search box, so infact it gets hidden under the next line.

sometimes you can just about see these words so if you want to show or hide them then you need to increase/decrease the line-height or decrease/increase the height value in instantSearch.css for .resultsContainer a

to sort out the screen resolution problem backup and replace your instantSearch.js with the following:

/**
 * @package Instant Search Results
 * @copyright Copyright Ayoob G 2009-2011
 * @copyright Portions Copyright 2003-2006 The Zen Cart Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */


//This jScript file is used to create our instant search box


//these var's will be used to maintain multiple request
var runningRequest = false;
var request;

//if you want to manually position the result box you can set autoPosition to false
//but make sure to provide the top and left value in instantSearch.css
var autoPosition = true;
var offset_left = 280;
var offset_top = 0;


var inputboxCurrent;

//checks to see if the document has loaded and is ready
$(document).ready(function () {


	//this will apply the instant search feature to all the search boxes
    var inputBox = $('input[name="keyword"]');

	//if you want to add instant search to only a specific box then comment out the var inputBox above
	//and uncomment out the specific search box selector bellow:
	
	//var inputBox = $('#navMainSearch > form[name="quick_find_header"] > input[name="keyword"]');
    //var inputBox = $('#navColumnTwoWrapper > form[name="quick_find_header"] > input[name="keyword"]');
	//var inputBox = $('#searchContent > form[name="quick_find"] > input[name="keyword"]');
	
	
	//this adds a instant search container bellow the search box
	inputBox.before('<div class="resultsContainer" ></div>');
	inputBox.attr('autocomplete', 'off');
	
	//re-position all the instant search container correctly into their places
	if (autoPosition == true){
		inputBox.each(function (index) {
			var offset = $(this).offset();
			$(this).prev().css("left", offset.left + "px");
			$(this).prev().css("top", ($(this).outerHeight(true) + offset.top) + "px");
		});
	}


	//if the search box losses focus, then the instant search container will be hidden
    inputBox.blur(function () {
        if (inputboxCurrent) {
            var resultsContainer = inputboxCurrent.prev();
            resultsContainer.delay(300).slideUp(200);
        }
    });


	//if we resize the browser or zoom in or out of a page then the instant search container will be hidden
	$(window).resize(function() {
        if (inputboxCurrent) {
            var resultsContainer = inputboxCurrent.prev();
            resultsContainer.hide();
        }
	});


	//the user starts to enter a few characters into the search box
    inputBox.keyup(function () {

		//only the currently selected search box will be used
        inputboxCurrent = $(this);

		//assign a variable to the instant search container
        var resultsContainer = $(this).prev();

        //we capture the words that are being typed into the search box
        var searchWord = $(this).val();
		var replaceWord = searchWord;
		
		//we clean up the word for any unnecessary characters or double spaces
        searchWord = searchWord.replace(/^\s+/, "");
        searchWord = searchWord.replace(/  +/g, ' ');

       
        if (searchWord == "") {

            //if the search value entered is empty, we then hide the instant search container	
            resultsContainer.hide();

        } else {

            //if multiple requests are sent to the server, we then abort any previous request, before a new request is sent
			//this only comes in use if user is a fast typer
            if (runningRequest) {
                request.abort();
            }

            runningRequest = true;
           
			//we then pass on the search word to searches.php
			//searches.php will then look for all the search results 
            request = $.getJSON('searches.php', {query: searchWord}, function (data) {
                
				
                if (data.length > 0) {
                    var resultHtml = '';
                    $.each(data, function (i, item) {
						//if any search result are found, a link will be created and placed into the instant search container
                        resultHtml += '<li><a href="' + generateLink(item.pc,item.l) + '"><span class="alignRight" style="border:1px solid #fff;">' + formatNumber(item.c) + '</span>' + highlightWord(replaceWord,item.q) + '</a></li>';
                    });

					
					//fill the container with the matching products and categories
                    resultsContainer.html('<ul><li><span style="font:12px; font-weight:bold; border:1px #fff; position:relative; left:5px; top:9px; ">Quick Search Result</span> <span class="No_text" style="border:1px #fff">No.</span><hr/></li>'+resultHtml+'</ul>');

					
                    if (!resultsContainer.is(':visible')) {
						
						//auto position container if needs be
						if (autoPosition == true){
							autoPositionContainer(inputboxCurrent, resultsContainer);
						}
						
						//drop down instant search box
                        resultsContainer.slideDown(100);
                    }
					
                } else {
                    resultsContainer.hide();

                }

                runningRequest = false;
            });
        }
    });
});

//this function auto positions the container
function autoPositionContainer(inputBoxCurr, resltsContainer){
	var offsetInput = inputBoxCurr.offset();
	var overFlow = offsetInput.left + resltsContainer.outerWidth(true);
	var winWidth = $(document).width();
	
	if (overFlow > winWidth){ // this checks to see if the container overflows on the right of the window
		var dif = overFlow - winWidth;
		
		if ((offsetInput.left - dif) < 0){// this checks to see if the container overflows on the left of the window
			resltsContainer.css("left", 0 + "px");
		}else{
			if (offset_left > 0){
				resltsContainer.css("left", (offsetInput.left - offset_left)  + "px");
			}else{
				resltsContainer.css("left", (offsetInput.left - dif) + "px");
			}
		}
	}else{
		resltsContainer.css("left", (offsetInput.left - offset_left)  + "px");
	}
	resltsContainer.css("top", (inputBoxCurr.outerHeight(true) + offsetInput.top + offset_top) + "px");
}

//this function creates the link back to the matching products or categories
function generateLink(productORcategory, productCategoryID)
{
	var l = "";
	if (productORcategory == "p"){
		l = "index.php?main_page=product_info&products_id=" + productCategoryID;
	}else{
		l = "index.php?main_page=index&cPath=" + productCategoryID;
	}
	
	return l;

}


function highlightWord(findTxt,replaceTxt)
{
	var f = findTxt.toLowerCase();
	var r = replaceTxt.toLowerCase();
	var regex = new RegExp('(' + f + ')', 'i');
	return r.replace(regex, '<span class="thinFont" style="background-color:#f8ee4e; border:1px solid #fff;">' + f + '</span>')
	
}

function formatNumber(num)
{
	return num.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
	
}

then locate and change the values for:

var offset_left = 280;
var offset_top = 0;

and change them to your desired positions i.e if i want my box to be 30px left and 20px top then:

var offset_left = 30;
var offset_top = 20;

Hi,
I now understand what you mean. I was viewing your site in firefox, so i couldn't understand what was going on. The tails get cut of horizontally because the height of the line is small, you will need to open instantSearch.css and increase the height in .resultsContainer a { you will also need to add line-height

Here's a brief explanation of these properties:
height: this controls the height of the line if its small then the words get cut off. if its big, then it looks stupid.
line-height: this controls the line seperation for long product names (i.e product names that can not fit into 1 line)

Change your code from:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:18px;
}

into:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:100%;
line-height:100%;
}

You then have to test different values for both height: and line-height: to see which works best. (if you want to work in pixels then change % into px)

for compatibility you may have to see how it looks in chrome and firefox (a lot of users use these browsers)

thank you so much! that solved my problem.

[AyoobG]

AyoobG,

Thank you. it currently sits on my testing server at home so not visible to the public. Is it as simple as just making sure each mod points to its own file or once they are loaded are the clashes related to the names of functions etc in the various jquery files being loaded a few times from different versions ( I belive these files get preloaded)

Hi,

It's prob loading wrong jQuery script. Anyways i've tweaked the code in instantSearch.js so it should work with older jquery files, it seems outerheight and outerwidth are incompatible with old jquery files.

Here's the code:

/**
 * @package Instant Search Results
 * @copyright Copyright Ayoob G 2009-2011
 * @copyright Portions Copyright 2003-2006 The Zen Cart Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */


//This jScript file is used to create our instant search box


//these var's will be used to maintain multiple request
var runningRequest = false;
var request;

//if you want to manually position the result box you can set autoPosition to false
//but make sure to provide the top and left value in instantSearch.css
var autoPosition = true;
var offset_left = 100;
var offset_top = 10;

var inputboxCurrent;

//checks to see if the document has loaded and is ready
$(document).ready(function () {


	//this will apply the instant search feature to all the search boxes
    var inputBox = $('input[name="keyword"]');

	//if you want to add instant search to only a specific box then comment out the var inputBox above
	//and uncomment out the specific search box selector bellow:
	
	//var inputBox = $('#navMainSearch > form[name="quick_find_header"] > input[name="keyword"]');
    //var inputBox = $('#navColumnTwoWrapper > form[name="quick_find_header"] > input[name="keyword"]');
	//var inputBox = $('#searchContent > form[name="quick_find"] > input[name="keyword"]');
	
	
	//this adds a instant search container bellow the search box
	inputBox.before('<div class="resultsContainer"></div>');
	inputBox.attr('autocomplete', 'off');
	
	//re-position all the instant search container correctly into their places
	if (autoPosition == true){
		inputBox.each(function (index) {
			var offset = $(this).offset();
			$(this).prev().css("left", offset.left + "px");
			$(this).prev().css("top", ($(this).height() + offset.top) + "px");
			
		});
	}


	//if the search box losses focus, then the instant search container will be hidden
    inputBox.blur(function () {
        if (inputboxCurrent) {
            var resultsContainer = inputboxCurrent.prev();
            resultsContainer.delay(300).slideUp(200);
        }
    });


	//if we resize the browser or zoom in or out of a page then the instant search container will be hidden
	$(window).resize(function() {
        if (inputboxCurrent) {
            var resultsContainer = inputboxCurrent.prev();
            resultsContainer.hide();
        }
	});
	
	
	//the user starts to enter a few characters into the search box
    inputBox.keyup(function () {

		//only the currently selected search box will be used
        inputboxCurrent = $(this);

		//assign a variable to the instant search container
        var resultsContainer = $(this).prev();

        //we capture the words that are being typed into the search box
        var searchWord = $(this).val();
		var replaceWord = searchWord;
		
		//we clean up the word for any unnecessary characters or double spaces
        searchWord = searchWord.replace(/^\s+/, "");
        searchWord = searchWord.replace(/  +/g, ' ');

       
        if (searchWord == "") {

            //if the search value entered is empty, we then hide the instant search container	
            resultsContainer.hide();

        } else {

            //if multiple requests are sent to the server, we then abort any previous request, before a new request is sent
			//this only comes in use if user is a fast typer
            if (runningRequest) {
                request.abort();
            }

            runningRequest = true;
           
			//we then pass on the search word to searches.php
			//searches.php will then look for all the search results 
            request = $.getJSON('searches.php', {query: searchWord}, function (data) {
                
				
                if (data.length > 0) {
                    var resultHtml = '';
                    $.each(data, function (i, item) {
						//if any search result are found, a link will be created and placed into the instant search container
                        resultHtml += '<li><a href="' + generateLink(item.pc,item.l) + '"><span class="alignRight">' + formatNumber(item.c) + '</span>' + highlightWord(replaceWord,item.q) + '</a></li>';
                    });
					resultHtml += '<li><a href="index.php?main_page=advanced_search_result&search_in_description=1&keyword=' + replaceWord + '"><span class="alignRight">More result...</span></a></li>';
					//fill the container with the matching products and categories
                    resultsContainer.html('<ul>'+resultHtml+'</ul>');
					
                    if (!resultsContainer.is(':visible')) {
						
						//auto position container if needs be
						if (autoPosition == true){
							autoPositionContainer(inputboxCurrent, resultsContainer);
						}
						
						//drop down instant search box
                        resultsContainer.slideDown(100);
                    }
					
                } else {
                    resultsContainer.hide();

                }

                runningRequest = false;
            });
        }
    });
});

//this function auto positions the container
function autoPositionContainer(inputBoxCurr, resltsContainer){
	var offsetInput = inputBoxCurr.offset();
	var overFlow = offsetInput.left + resltsContainer.width() -20;
	var winWidth = $(document).width();
	
	if (overFlow > winWidth){ // this checks to see if the container overflows on the right of the window
		var dif = overFlow - winWidth;
		
		if ((offsetInput.left - dif) < 0){// this checks to see if the container overflows on the left of the window
			resltsContainer.css("left", 0 + "px");
			
		}else{
			resltsContainer.css("left", (offsetInput.left - offset_left)  + "px");
		}
	}else{
		resltsContainer.css("left", (offsetInput.left - offset_left)  + "px");
	}
	resltsContainer.css("top", (inputBoxCurr.height() + offsetInput.top + offset_top) + "px");
}

//this function creates the link back to the matching products or categories
function generateLink(productORcategory, productCategoryID)
{
	var l = "";
	if (productORcategory == "p"){
		l = "index.php?main_page=product_info&products_id=" + productCategoryID;
	}else{
		l = "index.php?main_page=index&cPath=" + productCategoryID;
	}
	
	return l;

}


function highlightWord(findTxt,replaceTxt)
{
	var f = findTxt.toLowerCase();
	var r = replaceTxt.toLowerCase();
	var regex = new RegExp('(' + f + ')', 'i');
	return r.replace(regex, '<span class="thinFont">' + f + '</span>')
	
}

function formatNumber(num)
{
	return num.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
	
}

simply replace the code in your instantSearch.js file with this one. (You wouldn't need to add the jquery.js file that came with instant search)

You can adjust the position of your box by changing the values in:

var offset_left = 100;
var offset_top = 10;

If this doesn't work then simply replace the entire code in instantSearch.js with the following code and reload the webpage so that we can find out by an alert box as to which version of jquery is being loaded:

alert($().jquery);

[MikeyG]

AyoobG,

Have tried the code above and still the same issue. I have tried to reference different Jquery files in the jscript_instantSearch.php file as well by changing the line echo '<script type="text/javascript" src="' . DIR_WS_TEMPLATE . 'jscript/jquery.js"></script>' . "\n";


So put your alert($().jquery); and it brings up the version of the file I set above - eg. echo '<script type="text/javascript" src="' . DIR_WS_TEMPLATE . 'jscript/jquery/jquery-1.3.2.min.js"></script>' . "\n"; wil show 1.3.2 in the alert box. But when I undo the change to the fiel and remove the alert and put the code as below back in then I still have the same issue. i.e. I can have the instant search but no AJAx image swapper or if I remove the reference to the jquery.js then I loose the instant search and get my images back.