推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

    查看: 77|回复: 0

    [ECshop教程] ECSHOP搜索结果滑动下拉显示相关商品的效果

    [复制链接]
    发表于 2018-4-28 18:57:04 | 显示全部楼层 |阅读模式
    所需要的样式我们可以复制到style.css里:

    • /*搜索滑动效果*/
    • .Menu {
    • position:absolute;
    • top:30px;
    • left:7px;
    • width:150px;
    • height:auto;
    • z-index:1;
    • background:#FFF;
    • border:1px solid #000;
    • display:none;
    • }
    • .Menu2 {
    • position: absolute;
    • left:0;
    • top:0;
    • width:100%;
    • height:auto;
    • overflow:hidden;
    • z-index:1;
    • }
    • .Menu2 ul{margin:0;padding:0}
    • .Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
    •              border-bottom:1px dashed #ccc;color:#666;cursor:pointer;background:#FFF;
    •     change:expression(
    •      this.onmouseover=function(){
    •        this.style.background="#F2F5EF";
    •      },
    •      this.onmouseout=function(){
    •        this.style.background="";
    •      }
    •     )
    •    }
    • input{width:200px}
    • .form{width:200px;height:auto;}
    • .form div{position:relative;top:0;left:0;margin-bottom:5px}

    复制代码


    以下代码需要加到输入框普遍 比如page_header.lbi
    • <script type="text/javascript">
    •   function showAndHide(obj,types,text){
    •     var Layer=window.document.getElementById(obj);
    •     switch(types){
    •    case "show":
    •      if(text!='')
    •   {
    •              Layer.style.display="block";
    •     Ajax.call('search_div.php', 'act=search&text=' + text, changesumResp**e, 'GET', 'JSON');
    •   }
    •    break;
    •    case "hide":
    •      Layer.style.display="none";
    • }
    •   }
    •   function getValue(obj,str){
    •     var input=window.document.getElementById(obj);
    • input.value=str;
    •   }
    • function changesumResp**e(res)
    • {
    •     var a='';
    •       for (var i = 0; i < res.content.length; i++)
    •       {
    •         a += "<li onmousedown=getValue('keyword','" + res.content.goods_name + "')>" + res.content.goods_name + "</li>";
    •    }
    •   // alert(a);
    •    document.getElementById('show_stock').innerHTML = a;
    • }
    • </script>

    复制代码


    我们输入框的代码
    • <input name="keywords" type="text" id="keyword" value="{$search_keywords|escape}" style=" border:0; margin-left:15px;margin-top:5px; width:130px; height:15px;"/>
    • <div class="Menu" id="List1">
    • <div class="Menu2">
    • <ul style="padding:0px; margin:0px;" id="show_stock">
    • </ul>
    • </div>
    • </div>

    复制代码


    ajax请求php的代码

    search_div.php
    • <?php
    • define('IN_ECS', true);
    • require(dirname(__FILE__) . '/includes/init.php');
    • require(dirname(__FILE__) . '/admin/includes/lib_main.php');
    • if($_REQUEST['act'] == 'search'){
    •   $keywords = json_str_iconv(trim($_GET['text']));
    •   $sql = "SELECT goods_name,goods_id FROM " . $GLOBALS['ecs']->table('goods')." where goods_name like '%$keywords%'";
    •   $brand_array = $GLOBALS['db']->getall($sql);
    •   foreach($brand_array as $ids =>$value)
    •   {
    •    $brand_array[$ids]['goods_name'] = sub_str_xaphp($brand_array[$ids]['goods_name'],5);
    •   }
    •   make_json_result($brand_array);
    • }
    • function sub_str_xaphp($str, $length = 0, $append = true)
    • {
    •     $str = trim($str);
    •     $strlength = strlen($str);
    •     if ($length == 0 || $length >= $strlength)
    •     {
    •         return $str;
    •     }
    •     elseif ($length < 0)
    •     {
    •         $length = $strlength + $length;
    •         if ($length < 0)
    •         {
    •             $length = $strlength;
    •         }
    •     }
    •     if (function_exists('mb_substr'))
    •     {
    •         $newstr = mb_substr($str, 0, $length, EC_CHARSET);
    •     }
    •     elseif (function_exists('iconv_substr'))
    •     {
    •         $newstr = iconv_substr($str, 0, $length, EC_CHARSET);
    •     }
    •     else
    •     {
    •         //$newstr = trim_right(substr($str, 0, $length));
    •         $newstr = substr($str, 0, $length);
    •     }
    •     if ($append && $str != $newstr)
    •     {
    •         $newstr .= '';
    •     }
    •     return $newstr;
    • }
    • ?>

    复制代码


    在商品少的情况下 我们之间查询 如果多了,ecshop模板屋建议修改程序

    学建站、学推广、学赚钱,上56站长论坛就够了!个性签名请到个人资料里面修改……

    本版积分规则

    关闭

    推56站长论坛推荐上一条 /3 下一条

    站长QQ
    在线咨询
    咨询热线
    QQ:405327411
    站长

    QQ|广告合作|关于我们|联系我们|免责声明|网站导航|站长论坛 ( 豫ICP备11018337号-5

    王宝臣旗下网站 推56论坛(www.tui56.com|ask.tui56.com|blog.tui56.com|daohang.tui56.com)

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表