首页 > 代码库 > ecshop搜索出现相关商品的效果滑动下拉效果

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

2024-08-08 14:17:56   220人阅读

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=http://www.mamicode.com/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 onm ousedown=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="http://www.mamicode.com/{$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搜索出现相关商品的效果滑动下拉效果


联系
我们