Instant Search

[AyoobG]

Hello,

Thank you for the response, and it seems to all be in place now, but is not working, can you please take a look at www.efpsupply.com and try the search and let me know as I see no differance in the search.

Thx Much,
Erick

Hi,

searches.php works fine cut and paste the following link into your browser and it will push some results:

http://www.efpsupply.com/searches.php?query=lind

All your files are in their correct places:

I think the problem could lie in instantSearch.js for your spacific site it may be in conflict with other scripts in your site (i think).

Try this on your offline site (not live):

open instantSearch.js delete everthing and replace it with the following code bellow, then refresh the page a msg box should pop up.

try entering 1 letter into the search box and another 2 msgbox should popup.

reply back with result!






//replace with this test code bellow

/**
 * @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 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"]');
	
	alert("step1, if see some code then this bit works:" + inputBox.parent().html());

	//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 () {

		alert("step2 keyup works");
		
		//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) {
                
				alert("step3 data length is " + data.length);
				
                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>';
                    });
					
					//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.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{
			resltsContainer.css("left", (offsetInput.left - dif) + "px");
		}
	}else{
		resltsContainer.css("left", offsetInput.left + "px");
	}
	resltsContainer.css("top", (inputBoxCurr.outerHeight(true) + offsetInput.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,");
	
}

[melirlbr]

Having the same issue, installed everything but still not working, looks like some add on conflicts with this new model

[gloerick]

fix does not work, still using 1.3.9 not the new 1.50

[li-he-qi]

Great addon,it helps improve customers experiences very much, I installed it and it works great,
still some questions
1. it only search and show products name, category name, but I think for some sites the product model and product description are also very important, in my case I don't want it to search the category names, so the best method is that we can have switches in the admin to switch on/off these options(products name, product model, product description, category name)

2.Can I switch off searching category names simply by commenting out the following codes in the searches.php? :

//similar to product search but now we search witin categories
	$sqlCategories = "SELECT categories_name, categories_id
			FROM " . TABLE_CATEGORIES_DESCRIPTION . "
			WHERE (categories_name  LIKE :wordSearchPlus:) 
				OR (LEFT(categories_name,LENGTH(:wordSearch:)) SOUNDS LIKE :wordSearch:) 
			ORDER BY  
				field(LEFT(categories_name,LENGTH(:wordSearch:)), :wordSearch:) DESC
			LIMIT 4";
		
	$sqlCategories = $db->bindVars($sqlCategories, ':wordSearch:', $wordSearch, 'string');
	$sqlCategories = $db->bindVars($sqlCategories, ':wordSearchPlus:', $wordSearchPlus, 'string');

	$dbCategories = $db->Execute($sqlCategories);
	
	
	
	if ($dbCategories->RecordCount() > 0) {
	  while (!$dbCategories->EOF) {
		//this searches for the number of products within a category
		$products_count = zen_count_products_in_category($dbCategories->fields['categories_id']); 

		$prodResult = strip_tags($dbCategories->fields['categories_name']);
		if (strtolower(substr($prodResult,0,strlen($wordSearch))) == strtolower($wordSearch)){
			$results[] = array(
				'q'=>$prodResult,
				'c'=>$products_count,
				'l'=>$dbCategories->fields['categories_id'],
				'pc'=>"c"
			);
		}else{
			$resultsAddAfter[] = array(
				'q'=>$prodResult,
				'c'=>$products_count,
				'l'=>$dbCategories->fields['categories_id'],
				'pc'=>"c"
			);	
		}
		
		
		$dbCategories->MoveNext();
	  }
	}
	
}

2.it now don't show disabled products and out of stock products, but it still shows Disabled Category Names which should be fixed

3. better to have a swtch in the admin for show result counting or not
4. the search result page didn't show the full path for a subcategory as the default zencart behaviour.

5 need a place in the admin to define the returned searching result number especially when it comes to website with many products or categories
,sorry for many questions

[gloerick]

Is there a new download with a bit better instruction to get this going ?
as it still will not run on my site.

Thx,
Erick

[li-he-qi]

Is there a new download with a bit better instruction to get this going ?
as it still will not run on my site.

Thx,
Erick

AyoobG said this:
**************
2. Also i checked your code and the following 3 files are in their correct places:

jquery.js
instantSearch.js
instantSearch.css

however you can remove jquery.js from your code because you already have a file called jscript_jquery-1.4.min.js. Both of these files are infact the same. To remove this file open jscript_instantSearch.php and remove the following piece of code:

echo '<script type="text/javascript" src="' . DIR_WS_TEMPLATE . 'jscript/jquery.js"></script>' . "\n";
**********

Have you finished these 2 steps?: delete jquery.js and edit jscript_instantSearch.php , as I saw you only said all the files are in right places.

[li-he-qi]

I tested this addon for some time, still some suggestion:

sure we use this addon to reduce customers' manual typing by providing some suggestions,

currently this addon will supply some products or category LINKs in a drop down box when typing in the search box, but it can only show very few products by leaving many other relevant products ignored, this may make customer think we do only have these few products.

when customer type, can we just provide some keyword suggestions(by searching from products name, products model, product descriptions)? and customer can move down the mouse to select a keyword into the search box, customers can decide whether to edit this keyword or not before they press the "search" button to search. many famous sites do in this way.

Thxs ayoobG for your great mod

[li-he-qi]

about keyword suggestion we can see google, ebay for demo

[AyoobG]

For most people instant search works without any problems.

For others it doesn't. One of the reasons instant search may not work correctly is that the variables in the javascript file (instantSearch.js) may be in conflict with other another javascript file on your web page.

In simple term instant search my not work properly with certain addons or modules installed on your site.

To fix this problem you can rename some of the variables in instantSearch.js

[AyoobG]

thanx li-he-qi for input,

here are some of the replies to your questions:

1. The objective of instant search is:

• To provide quick search results.

• The results should be only a few.

• The results should only contain common search querys such as product and category.

however if you want an indepth search result you can use the main search box.

But you are right in thinking that some people may think from the few results that the shop owners has only a few product.

To fix this problem you can add a "More results..." link to the end of the instant search results, this will make the user think there are more products in store, the "More results..." will then perform an indepth search.

If you want to try this out you must replace the code in instantSearch.js with the following 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 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">' + 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.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{
			resltsContainer.css("left", (offsetInput.left - dif) + "px");
		}
	}else{
		resltsContainer.css("left", offsetInput.left + "px");
	}
	resltsContainer.css("top", (inputBoxCurr.outerHeight(true) + offsetInput.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,");
	
}

2. If you really want to customize instant search then check out the following site, i don't think it would be that hard to integrate this jQuerys instant search into zen cart.

3. About the Admin panel! to be honest i have no plans in creating it, but if anyone other is interested, then by all means feel free to take over