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

ecshop搜索栏效果如下

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

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

复制代码

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

1. <script type="text/javascript">
2. function showAndHide(obj,types,text){
3. var Layer=window.document.getElementById(obj);
4. switch(types){
5. case "show":
6. if(text!='')
7. {
8. Layer.style.display="block";
9. Ajax.call('search_div.php', 'act=search&text=' + text, changesumResp**e, 'GET', 'JSON');
10. }
11. break;
12. case "hide":
13. Layer.style.display="none";
14. }
15. }
16. function getValue(obj,str){
17. var input=window.document.getElementById(obj);
18. input.value=str;
19. }
20. function changesumResp**e(res)
21. {
22. var a='';
23. for (var i = 0; i < res.content.length; i++)
24. {
25. a += "<li onmousedown=getValue('keyword','" + res.content[i].goods_name + "')>" + res.content[i].goods_name + "</li>";
26. }
27. // alert(a);
28. document.getElementById('show_stock').innerHTML = a;
29. }
30. </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. <?php
2. define('IN_ECS', true);
3. require(dirname(__FILE__) . '/includes/init.php');
4. require(dirname(__FILE__) . '/admin/includes/lib_main.php');
5. if($_REQUEST['act'] == 'search'){
6. $keywords = json_str_iconv(trim($_GET['text']));
7. $sql = "SELECT goods_name,goods_id FROM " . $GLOBALS['ecs']->table('goods')." where goods_name like '%$keywords%'";
8. $brand_array = $GLOBALS['db']->getall($sql);
9. foreach($brand_array as $ids =>$value)
10. {
11. $brand_array[$ids]['goods_name'] = sub_str_xaphp($brand_array[$ids]['goods_name'],5);
12. }
13. make_json_result($brand_array);
14. }
15. function sub_str_xaphp($str, $length = 0, $append = true)
16. {
17. $str = trim($str);
18. $strlength = strlen($str);
19. if ($length == 0 || $length >= $strlength)
20. {
21. return $str;
22. }
23. elseif ($length < 0)
24. {
25. $length = $strlength + $length;
26. if ($length < 0)
27. {
28. $length = $strlength;
29. }
30. }
31. if (function_exists('mb_substr'))
32. {
33. $newstr = mb_substr($str, 0, $length, EC_CHARSET);
34. }
35. elseif (function_exists('iconv_substr'))
36. {
37. $newstr = iconv_substr($str, 0, $length, EC_CHARSET);
38. }
39. else
40. {
41. //$newstr = trim_right(substr($str, 0, $length));
42. $newstr = substr($str, 0, $length);
43. }
44. if ($append && $str != $newstr)
45. {
46. $newstr .= '';
47. }
48. return $newstr;
49. }
50. ?>

复制代码

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