分享ec搜索出现相关商品的效果滑动效果（模仿百度）

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家

效果如下：

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

  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


  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. }

  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. }

  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


  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);

  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. ?>
复制代码


在商品少的情况下 我们之间查询 如果多了 需要修改程序

回答：
好东西顶起

能不能做一个头部的导航的下拉的那种发个帖子？？谢谢

看情况自己是否加入此功能了.

哇!齐老师太帅了!

为什么我照着步骤做，但是没有效果
怎么解决呢？齐老师

如果商品数量较多，比如我们都以李宁xxx开头商品名称，那如果用户搜李宁，会显示什么？

这个会不会影响页面执行效率和网页打开的速度呢？

在商品少的情况下 我们之间查询 如果多了 需要修改程序


那么说还有需要更改的可能性咯？ 。。。

不错
希望能用到.

好东西！赞个！

很好，不过大家在拷贝的时候需要把
changesumResp**e 这个方法中的*　号换成其他字符，要不然会出错。
估计是ｅｃ在发布代码时有问题。
楼主方便的话，再更新下这个。呵呵　

感谢楼主提供的好东西！！

search_div.php
里面的代码，不知道要放什么地方，请指教。
就是这个AJAX请求PHP

以前也有个这样的贴子,但实用性太差,不知这个怎么样?

谁成功安装了发个演示站出来看一下!