Instant Search

[MikeyG]

I have just installed this mod and it works as expected. However I then realised that my AJAX Image swapper was not working.

There appears to be a conflict with the JQuery.js file. if I remove it ( and the call to it in the instantsearch.js file as explained above in an earlier post then the AJAX IMAGE SWAPPER mode works again but not the instant search.

I seem to have so many versions of Jquery, mootools, slimbox in various subdirectories under ...mytemplate/jscript/... I am not sure which are needed as they have obviously been installed by various modules.

Can you explain how to avoid the conflict and is it possible to call the correct file that is required by each specific module to avoid the conflict.

Thanks

[AyoobG]

I have just installed this mod and it works as expected. However I then realised that my AJAX Image swapper was not working.

There appears to be a conflict with the JQuery.js file. if I remove it ( and the call to it in the instantsearch.js file as explained above in an earlier post then the AJAX IMAGE SWAPPER mode works again but not the instant search.

I seem to have so many versions of Jquery, mootools, slimbox in various subdirectories under ...mytemplate/jscript/... I am not sure which are needed as they have obviously been installed by various modules.

Can you explain how to avoid the conflict and is it possible to call the correct file that is required by each specific module to avoid the conflict.

Thanks

It seems to me you may have 2 or more different versions of jQuery (i.e 1.3---1.4...). One version works perfectly with the image swapper and the other works perfectly with the instant search.

Instant search uses jQuery v1.6.4.
If you want you can remove the jQuery file that came with instant search and then recode instantSearch.js to work with the same version of jQuery you are using for image swapper.

[lala rock]

Hi, I would like to customise the look of this module for my site. Managed to make some changes but noticed that some of the letters are cut. For instance when I typed in Magnetic Clamp, the letters g and p are cut. And can you explain to me why on my screen it was aligned with the edge of the site (the red band) while on other resolutions it was not aligned. Here are the screenshots for you to understand more


Here is output on my screen (1280 x 1024 screen resolution)



here is for the 1366 x 768 screen resolution



and here is for the 1920 x 1080 screen resolution




Thanks in advance

[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]

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;

[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

[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)