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