ecshop搜索出现相关商品的效果滑动下拉效果

2016-09-07 22:02 来源：www.chinab4c.com 作者：ecshop专家

ecshop搜索栏效果如下

 

 所需要的样式我们可以复制到style.css里：

 

  1.  
  2. /*搜索滑动效果*/
  3. .Menu {
  4. position:absolute;
  5. top:30px;
  6. left:7px;
  7. width:150px;
  8. height:auto;
  9. z-index:1;
  10. background:#FFF;
  11. border:1px solid #000;
  12. display:none;
  13. }
  14. .Menu2 {
  15. position: absolute;
  16. left:0;
  17. top:0;
  18. width:100%;
  19. height:auto;
  20. overflow:hidden;
  21. z-index:1;
  22. }
  23. .Menu2 ul{margin:0;padding:0}
  24. .Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
  25.              border-bottom:1px dashed #ccc;color:#666;cursor:pointer;background:#FFF;
  26.     change:expression(
  27.      this.onmouseover=function(){
  28.        this.style.background="#F2F5EF";
  29.      },
  30.      this.onmouseout=function(){
  31.        this.style.background="";
  32.      }
  33.     )
  34.    }
  35. input{width:200px}
  36. .form{width:200px;height:auto;}
  37. .form div{position:relative;top:0;left:0;margin-bottom:5px}
复制代码



以下代码需要加到输入框普遍 比如page_header.lbi

  1.  
  2. <script type="text/javascript">
  3.   function showAndHide(obj,types,text){
  4.     var Layer=window.document.getElementById(obj);
  5.     switch(types){
  6.    case "show":
  7.      if(text!='')
  8.   {
  9.              Layer.style.display="block";
  10.     Ajax.call('search_div.php', 'act=search&text=' + text, changesumResp**e, 'GET', 'JSON'); 
  11.   }
  12.    break;
  13.    case "hide":
  14.      Layer.style.display="none";
  15. }
  16.   }
  17.   function getValue(obj,str){
  18.     var input=window.document.getElementById(obj);
  19. input.value=str;
  20.   }
  21.  
  22. function changesumResp**e(res)
  23. {
  24.     var a='';
  25.       for (var i = 0; i < res.content.length; i++)
  26.       {
  27.         a += "<li onmousedown=getValue('keyword','" + res.content[i].goods_name + "')>" + res.content[i].goods_name + "</li>";
  28.    }
  29.   // alert(a);
  30.    document.getElementById('show_stock').innerHTML = a;
  31. } 
  32.   
  33. </script>
复制代码



我们输入框的代码

  1. <input name="keywords" onkeyup="showAndHide('List1','show',this.value);" onblur="showAndHide('List1','hide');" type="text" id="keyword" value="{$search_keywords|escape}" style=" border:0; margin-left:15px;margin-top:5px; width:130px; height:15px;"/>
  2. <div class="Menu" id="List1">
  3. <div class="Menu2">
  4. <ul style="padding:0px; margin:0px;" id="show_stock">
  5. </ul>
  6. </div>
  7. </div>
复制代码



ajax请求php的代码

search_div.php

  1.  
  2. <?php
  3. define('IN_ECS', true);
  4. require(dirname(__FILE__) . '/includes/init.php');
  5. require(dirname(__FILE__) . '/admin/includes/lib_main.php');
  6. if($_REQUEST['act'] == 'search'){
  7.   $keywords = json_str_iconv(trim($_GET['text']));
  8.   $sql = "SELECT goods_name,goods_id FROM " . $GLOBALS['ecs']->table('goods')." where goods_name like '%$keywords%'";
  9.   $brand_array = $GLOBALS['db']->getall($sql);
  10.   foreach($brand_array as $ids =>$value)
  11.   {
  12.    $brand_array[$ids]['goods_name'] = sub_str_xaphp($brand_array[$ids]['goods_name'],5);
  13.   
  14.   }
  15.   make_json_result($brand_array);
  16. }
  17. function sub_str_xaphp($str, $length = 0, $append = true)
  18. {
  19.     $str = trim($str);
  20.     $strlength = strlen($str);
  21.     if ($length == 0 || $length >= $strlength)
  22.     {
  23.         return $str;
  24.     }
  25.     elseif ($length < 0)
  26.     {
  27.         $length = $strlength + $length;
  28.         if ($length < 0)
  29.         {
  30.             $length = $strlength;
  31.         }
  32.     }
  33.     if (function_exists('mb_substr'))
  34.     {
  35.         $newstr = mb_substr($str, 0, $length, EC_CHARSET);
  36.     }
  37.     elseif (function_exists('iconv_substr'))
  38.     {
  39.         $newstr = iconv_substr($str, 0, $length, EC_CHARSET);
  40.     }
  41.     else
  42.     {
  43.         //$newstr = trim_right(substr($str, 0, $length));
  44.         $newstr = substr($str, 0, $length);
  45.     }
  46.     if ($append && $str != $newstr)
  47.     {
  48.         $newstr .= '';
  49.     }
  50.     return $newstr;
  51. }
  52. ?>
复制代码



在商品少的情况下 我们之间查询 如果多了，

 

相关标签：


最近更新

常用插件

ecshop热门问答

ecshop字体下载  ecshop笔记本  ecshop横版  ecshop降序  ecshop物流公司  ecshop勾字  ecshop手机评测  ecshop罪恶都市  ecshop语言学习  ecshop店长  ecshop者神  ecshop最低价  ecshop浪差  ecshop量子  ecshop摊位  ecshop燒包  ecshop魔法师  kingshard  kingshard插件  weedfs  ecshop小京东  小京东bug  小京东购物车  ec助理  数据导入导出  网站  ecshop跳转  sqlserver  商城  求解！！ 

ecshop热门资料

ecshopWAP模版  ecshophomeserver  ecshop在线等  ecshop左上角  ecshop病毒  ecshop帮帮忙。如图  ecshop操作  ecshop愿望  ecshop注册邮件  ecshop降价登记  ecshop俄罗斯  ecshop472  ecshop调用商品销量  ecshop下沉  ecshop科技创业  ecshop过虑  ecshop多功能  ecshop颜色  ecshop简化  ecshop最新资讯  ecshop文件结构  ecshop最少购买  dedecms右边公共  ecshop汽车  ecshopclause  ecshop1064  ecshop运输  ecshop有意者  ecshop支付宝免签约  ecshop默认信息 
ecshop问答 ecshop首页