Thread: Instant Search

Page 2 of 23 FirstFirst 123412 ... LastLast
Results 11 to 20 of 225
  1. #11
    Join Date
    Nov 2011
    Posts
    34
    Plugin Contributions
    1

    Default Re: Instant Search

    Quote Originally Posted by gloerick View Post
    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
    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"]');
    	
    	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,");
    	
    }

  2. #12
    Join Date
    Dec 2009
    Posts
    25
    Plugin Contributions
    0

    Default Re: Instant Search

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

  3. #13
    Join Date
    Feb 2006
    Location
    Boise, ID
    Posts
    334
    Plugin Contributions
    0

    Default Re: Instant Search

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

  4. #14
    Join Date
    Dec 2010
    Posts
    12
    Plugin Contributions
    0

    Default Re: Instant Search

    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? :


    Code:
    //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

  5. #15
    Join Date
    Feb 2006
    Location
    Boise, ID
    Posts
    334
    Plugin Contributions
    0

    Default Re: Instant Search

    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

  6. #16
    Join Date
    Dec 2010
    Posts
    12
    Plugin Contributions
    0

    Default Re: Instant Search

    Quote Originally Posted by gloerick View Post
    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.

  7. #17
    Join Date
    Dec 2010
    Posts
    12
    Plugin Contributions
    0

    Default Re: Instant Search

    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
    Last edited by Kim; 13 Jan 2012 at 11:25 PM.

  8. #18
    Join Date
    Dec 2010
    Posts
    12
    Plugin Contributions
    0

    Default Re: Instant Search

    about keyword suggestion we can see google, ebay for demo

  9. #19
    Join Date
    Nov 2011
    Posts
    34
    Plugin Contributions
    1

    Default Re: Instant Search

    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

  10. #20
    Join Date
    Nov 2011
    Posts
    34
    Plugin Contributions
    1

    Default Re: Instant Search

    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:
    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

 

 
Page 2 of 23 FirstFirst 123412 ... LastLast

Similar Threads

  1. Instant Quote
    By Congerman in forum General Questions
    Replies: 2
    Last Post: 15 Aug 2012, 12:29 PM
  2. Instant Coupon
    By Mickmo68 in forum Discounts/Coupons, Gift Certificates, Newsletters, Ads
    Replies: 4
    Last Post: 22 Dec 2008, 08:19 PM
  3. Instant Delivery?
    By eaglewu in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 30 Jul 2007, 09:30 AM
  4. changes instant
    By chufty bill in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 5 Sep 2006, 07:12 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR