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

ecshop搜索栏效果如下

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

1.  
2. /*搜索滑动效果*/
3. .Menu {
4. position:absolute;
5. top:30px;
6. left:7px;
7. 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. 100%;
19. height:auto;
20. overflow:hidden;
21. z-index:1;
22. }
23. .Menu2 ul{margin:0;padding:0}
24. .Menu2 ul li{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{200px}
36. .form{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; 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. ?>

复制代码

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