Thread: Instant Search

Page 4 of 16 FirstFirst ... 2345614 ... LastLast
Results 31 to 40 of 156
  1. #31
    Join Date
    May 2005
    Posts
    529
    Plugin Contributions
    0

    Default Re: Instant Search

    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

  2. #32
    Join Date
    Nov 2011
    Posts
    34
    Plugin Contributions
    1

    Default Re: Instant Search

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

  3. #33
    Join Date
    Dec 2011
    Posts
    41
    Plugin Contributions
    0

    Default Re: Instant Search

    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)

    Click image for larger version. 

Name:	1280x1024.jpg 
Views:	158 
Size:	21.3 KB 
ID:	10113

    here is for the 1366 x 768 screen resolution

    Click image for larger version. 

Name:	1366x768.jpg 
Views:	142 
Size:	21.4 KB 
ID:	10114

    and here is for the 1920 x 1080 screen resolution

    Click image for larger version. 

Name:	1920x1080.jpg 
Views:	138 
Size:	35.9 KB 
ID:	10115


    Thanks in advance

  4. #34
    Join Date
    Dec 2011
    Posts
    41
    Plugin Contributions
    0

    Default Re: Instant Search

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

  5. #35
    Join Date
    May 2005
    Posts
    529
    Plugin Contributions
    0

    Default Re: Instant Search

    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

  6. #36
    Join Date
    Nov 2011
    Posts
    34
    Plugin Contributions
    1

    Default Re: Instant Search

    Quote Originally Posted by lala rock View Post
    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:

    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 = 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;

  7. #37
    Join Date
    Nov 2011
    Posts
    34
    Plugin Contributions
    1

    Default Re: Instant Search

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

  8. #38
    Join Date
    Dec 2011
    Posts
    41
    Plugin Contributions
    0

    Default Re: Instant Search

    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.

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

    Default Re: Instant Search

    Quote Originally Posted by lala rock View Post
    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)

  10. #40
    Join Date
    May 2005
    Posts
    529
    Plugin Contributions
    0

    Default Re: Instant Search

    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)

 

 
Page 4 of 16 FirstFirst ... 2345614 ... 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