New Zenner
- Join Date:
- Dec 2011
- Posts:
- 41
- Plugin Contributions:
- 0
Instant Search
AyoobG:
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:**
>
> 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.
