zen cart搜索框智能提示

如果您愿意付费请人建站、制作模版,可以在这里发帖。谢绝广告!
版面规则
本版面用于提出建站、维护需求。严禁广告贴,违者封ID/IP

zen cart搜索框智能提示

帖子609176445@qq.com » 2014-06-18 15:40

本功能是实现类似谷歌搜索一样智能感知效果的。直接上代码
1. 根目录放suggestSearch.php
<?php

header('Content-type: text/html; charset=utf-8');
require 'includes/configure.php';

function zen_parse_input_field_data($data, $parse) {
return strtr(trim($data), $parse);
}

function sql_quote($value) {
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
if (function_exists("mysql_real_escape_string")) {
$value = mysql_real_escape_string($value);
} else {
$value = addslashes($value);
}
return $value;
}

$conn = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD);
mysql_query("set names 'utf8'"); //编码转化
if (!$conn) {
die("could not connect to the database:</br>" . mysql_error()); //诊断连接错误
}
$db_selecct = mysql_select_db(DB_DATABASE); //选择数据库
$post_name = zen_parse_input_field_data($_POST['proname'], array('"' => '&quot;'));
$post_name = sql_quote($post_name);
if (preg_match('/(delete|update|insert)/i', $post_name))
die('');
$sql = "SELECT products_name FROM products_description WHERE products_name like '" . $_POST['proname'] . "%' limit 10";
$result = mysql_query($sql);
$flat_count = false;
$string_builder = "<ul id=\"suggestBox\" style=\"margin:0px;padding:0px\">";
while ($result_row = mysql_fetch_object($result)) {
$echo_str = strtolower($result_row->products_name);
$regex = "/^(" . strtolower($_POST['proname']) . ")/";
$string_builder.='<li>' . preg_replace($regex, '$1<b>', $echo_str) . "</b></a></li>";
$flat_count = true;
}
$string_builder.="</ul>";
if ($flat_count)
echo $string_builder;
mysql_close($conn);
?>

2. 引入js文件,前提是要引入jquery

$(document).ready(function() {
var flag = true;
$("#tbx_search").keyup(function(event) {
if (flag) {
var get_name = $("#tbx_search").val();
if (get_name != '') {
var domain = "http://" + window.location.host;
// $("#suggestContainer").html("<img src=\"images/lightbox-ico-loading.gif\" />");
$.post(domain + "/suggestSearch.php", {proname: get_name}, function(data) {
if (data.length <= 2)
$("#suggestContainer").css({"display": "none"});
else {
$("#suggestContainer").css({"display": "block"});
$("#suggestContainer").html(data);
}
});
} else {
$("#suggestContainer").css({"display": "none"});
$("#suggestContainer").html("");
}
}
});
$("#tbx_search").keydown(function(event) {
switch (event.which) {
case 38:
movePrev();
break;
case 40:
moveNext();
break;
default:
flag = true;
break;
}

});
var movePrev = function() {
var index = $("ul#suggestBox li.curr").prevAll().length;
//alert(index);
if (index == 0) {
$("ul#suggestBox li").removeClass('curr').eq($("ul#suggestBox li").length - 1).addClass('curr'); //可循环移动
// if(index == 0) return false; //不可循环移动
//alert($("li").eq($("li").length - 1).text());
$("#tbx_search").val($("ul#suggestBox li").eq($("ul#suggestBox li").length - 1).text());
}
else {
$("ul#suggestBox li").removeClass('curr').eq(index - 1).addClass('curr');
$("#tbx_search").val($("ul#suggestBox li").eq(index - 1).text());
}
flag = false;
};

var moveNext = function() {
var index = $("ul#suggestBox li.curr").prevAll().length;
//alert(index);
if (index === 0) {
if ($("ul#suggestBox li.curr").length <= 0) { //初始化时没有一个li有curr类
$("ul#suggestBox li").removeClass('curr').eq(0).addClass('curr'); //可循环移动
$("#tbx_search").val($("ul#suggestBox li").eq(0).text());
}
else {
$("ul#suggestBox li").removeClass('curr').eq(index + 1).addClass('curr');
$("#tbx_search").val($("ul#suggestBox li").eq(index + 1).text());
// if(index == $("li").length-1) return false; //不可循环移动
}
} else {
$("ul#suggestBox li").removeClass('curr').eq(index + 1).addClass('curr');
$("#tbx_search").val($("ul#suggestBox li").eq(index + 1).text());
}
flag = false;
};

$("ul#suggestBox li").live('click', function() {
$("#tbx_search").val($(this).text());
$("input.btn_search").click();
});

$(document).bind("click", function(e) {
var target = $(e.target);
if (target.closest("#suggestContainer").length == 0) {
$("#suggestContainer").hide();
}
})

});

3. 模板目录下的tpl_search_header.php 给搜索框加上autocomplete="off" 属性 ID设置为:tbx_search

4.其他就是css调试了,就不陈述了
最后效果 如这个站 http://www.aidabano.com ,在搜索框打一个“欧”字 自然明白
609176445@qq.com
 
帖子: 1
注册: 2014-06-18 15:22
QQ 帐号: 609176445

  • 相关话题
    回复总数
    阅读次数
    最新文章

回到 收费服务



在线用户

正在浏览此版面的用户:没有注册用户 和 1 位游客

cron