Instant Search

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

[AyoobG]

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.

Hi Mikey,

Please remove the reference to jquery.js and make sure the images are back on and that AJAX image swapper works.

Once the image swapper is working you can now replace the entire code in instantSearch.js with:

alert($().jquery);

when you refresh your web browser, what version of jquery does it show in the alert box?

also at the same time does the image swapper work?

[MikeyG]

Hi Mikey,

Please remove the reference to jquery.js and make sure the images are back on and that AJAX image swapper works.

Once the image swapper is working you can now replace the entire code in instantSearch.js with:

alert($().jquery);

when you refresh your web browser, what version of jquery does it show in the alert box?

also at the same time does the image swapper work?

I am not getting any message box come up, unless I reference the jquery file in the jscript_instansearch.php file and then I get the version for the jquery file I reference and no image swapper working.

[AyoobG]

I am not getting any message box come up, unless I reference the jquery file in the jscript_instansearch.php file and then I get the version for the jquery file I reference and no image swapper working.

I think the problem lies in the order of each .js file being called in your web page.

for example instantSearch.js depends on jquery.js, so if we want both of these files to work we need to call jquery.js first and then instantSearch.js, i.e:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="instantSearch.js"></script>

however if we do it the other way round it will not work i.e call instantSearch.js first and then jquery.js:

<script type="text/javascript" src="instantSearch.js"></script>
<script type="text/javascript" src="jquery.js"></script>

My theory is that the image swapper is compatible with the old jquery file and will not work with the new one that comes with instantsearch, i.e when we install instant search with your image swapper this is how it looks:

<script type="text/javascript" src="jquery.js"></script> <--new
<script type="text/javascript" src="instantSearch.js"></script>
<script type="text/javascript" src="jquery.js"></script> <--old
<script type="text/javascript" src="imageSwaper.js"></script>

from the above you can see that instant search will work since it calls the new jquery file and image swapper will not work since it is also stuck with the new jquery file (it will ignore the old jquery file).

I think this might be your problem, but i'm not sure, it would be better if i could of had access to your sites header code.

what you can try is to remove both the references to jquery.js and instantSearch.js that came with instant search. Then go into the image swapper part of the code and add the instantSearch.js reference there, i.e:

<script type="text/javascript" src="jquery.js"></script> <--old
<script type="text/javascript" src="imageSwaper.js"></script>
<script type="text/javascript" src="instantSearch.js"></script>

again i would like to say this may be one possibility, not 100% sure!

[lala rock]

Hi! when I look into public_html/cache, I found this

PHP Warning: json_encode() [<a href='function.json-encode'>function.json-encode</a>]: Invalid UTF-8 sequence in argument in /home/cncmach/public_html/searches.php on line 161

Here is the code for searches.php

<?php
/**
 * @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 PHP file is used to get the search results from our database. 

// I don't know if this is nessceary
header( 'Content-type: text/html; charset=utf-8' );


//need to add this
require('includes/application_top.php');
global $db;


//this gets the word we are searching for. Usually from instantSearch.js.
$wordSearch = (isset($_GET['query']) ? $_GET['query'] : '');


// we place or results into these arrays
//$results will hold data that has the search term in the begining of the word. This will yield a better search result but the number of results will be a few.
//$resultsAddAfter will hold data that has the search term anywhere in the word. This will yield a normal search result but the number of results will be a high.
//$results has first priority over $resultsAddAfter
$results=array();
$resultsAddAfter=array();
$prodResult;


//the search word can not be empty
if (strlen($wordSearch) > 0) {
	
	//if the user enters less than 2 characters we would like match search results that beging with these characters
	//if the characters are greater than 2 then we would like to broaden our search results
	if (strlen($wordSearch) <= 2) {
		$wordSearchPlus =  $wordSearch . "%";
	}else{
		$wordSearchPlus =  "%" . $wordSearch . "%";
	}
	
	
	//first we would like to search for products that match our search word
	//we then order the search results with respect to the keyword found at the begining of each of the results


$sqlProduct = "SELECT " . TABLE_PRODUCTS_DESCRIPTION . ".products_name, " . TABLE_PRODUCTS_DESCRIPTION . ".products_id, " . TABLE_PRODUCTS . ".products_status
FROM " . TABLE_PRODUCTS_DESCRIPTION . ", " . TABLE_PRODUCTS . "
WHERE " . TABLE_PRODUCTS . ".products_id = " . TABLE_PRODUCTS_DESCRIPTION . ".products_id
AND " . TABLE_PRODUCTS . ".products_status <> 0
AND ((products_name LIKE :wordSearchPlus:) OR (LEFT(" . TABLE_PRODUCTS_DESCRIPTION . ".products_name,LENGTH(:wordSearch:)) SOUNDS LIKE :wordSearch:))
ORDER BY 
field(LEFT(" . TABLE_PRODUCTS_DESCRIPTION . ".products_name,LENGTH(:wordSearch:)), :wordSearch:) DESC,
" . TABLE_PRODUCTS_DESCRIPTION . ".products_viewed DESC
LIMIT 2";				

		
	//this protects use from sql injection - i think????							
	$sqlProduct = $db->bindVars($sqlProduct, ':wordSearch:', $wordSearch, 'string');
	$sqlProduct = $db->bindVars($sqlProduct, ':wordSearchPlus:', $wordSearchPlus, 'string');


	$dbProducts = $db->Execute($sqlProduct);
	
	
	//this takes each item that was found in the results and places it into 2 separate arrays
	if ($dbProducts->RecordCount() > 0) {
	  while (!$dbProducts->EOF) {
		$prodResult = strip_tags($dbProducts->fields['products_name']);
		if (strtolower(substr($prodResult,0,strlen($wordSearch))) == strtolower($wordSearch)){
			$results[] = array(
				//we have 4 seperate variables that will be passed on to instantSearch.js
				//'q' is the result thats been found
				//'c' is the number of item within a category search (we leave this empty for product search, look at the example bellow for category search)
				//'l' is used for creating a link to the product or category
				//'pc' lets us know if the word found is a product or a category
				'q'=>$prodResult,
				'c'=>"",
				'l'=>$dbProducts->fields['products_id'],
				'pc'=>"p"
			);
		}else{
			$resultsAddAfter[] = array(
				'q'=>$prodResult,
				'c'=>"",
				'l'=>$dbProducts->fields['products_id'],
				'pc'=>"p"
			);	
		}
		
		$dbProducts->MoveNext();
	  }
	}
	
	
	
	//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();
	  }
	}
	
}


//we now re-sort the results so that $results has first priority over $resultsAddAfter
foreach ($resultsAddAfter as &$value) {
	$results[] = array(
		'q'=>$value["q"],
		'c'=>$value["c"],
		'l'=>$value["l"],
		'pc'=>$value["pc"]
	);
}

unset($value);


//the results are now passed onto instantSearch.js
echo json_encode($results);


?>

The one in red is the code that this error is concerned with. What must be wrong here?

Thanks a lot

[AyoobG]

Hi! when I look into public_html/cache, I found this

PHP Warning: json_encode() [<a href='function.json-encode'>function.json-encode</a>]: Invalid UTF-8 sequence in argument in /home/cncmach/public_html/searches.php on line 161

Here is the code for searches.php

...

The one in red is the code that this error is concerned with. What must be wrong here?

Thanks a lot

Hi, the json_encode() function is a php function which sends data from php format into javascript format.

If some of the products contain foreign characters like è then json_encode won't work properly, and the product containing the character will stop instant search from functioning properly, hence the error.

However if you open searches.php and replace:

echo json_encode($results);

with:

echo json_encode(utf8json($results));

function utf8json($inArray) {

    static $depth = 0;

    /* our return object */
    $newArray = array();

    /* safety recursion limit */
    $depth ++;
    if($depth >= '30') {
        return false;
    }

    /* step through inArray */
    foreach($inArray as $key=>$val) {
        if(is_array($val)) {
            /* recurse on array elements */
            $newArray[$key] = utf8json($val);
        } else {
            /* encode string values */
            $newArray[$key] = utf8_encode($val);
        }
    }

    /* return utf8 encoded array */
    return $newArray;
}

then it will be able to convert these foreign characters properly.

[lala rock]

Thank you, when I add this to searches.php, the error doesnt show anymore.

[wirefram]

Hi

works great except it displays also all disabled categories....

what can i do?

Thanks

L.