博客水木

要实现ECshop搜索栏效果如下图

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

/*搜索滑动效果*/
.Menu {
position:absolute;
top:30px;
left:7px;
width:150px;
height:auto;
z-index:1;
background:#FFF;
border:1px solid #000;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
             border-bottom:1px dashed #ccc;color:#666;cursor:pointer;background:#FFF;
    change:expression(
     this.onmouseover=function(){
       this.style.background=”#F2F5EF”;
     },
     this.onmouseout=function(){
       this.style.background=””;
     }
    )
   }
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}

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

<script type=”text/javascript”>
  function showAndHide(obj,types,text){
    var Layer=window.document.getElementById(obj);
    switch(types){
   case “show”:
     if(text!=”)
  {
             Layer.style.display=”block”;
    Ajax.call(‘search_div.php’, ‘act=search&text=’ + text, changesumResp**e, ‘GET’, ‘JSON’);
  }
   break;
   case “hide”:
     Layer.style.display=”none”;
}
  }
  function getValue(obj,str){
    var input=window.document.getElementById(obj);
input.value=str;
  }
 
function changesumResp**e(res)
{
    var a=”;
      for (var i = 0; i < res.content.length; i++)
      {
        a += “<li onmousedown=getValue(‘keyword’,'” + res.content[i].goods_name + “‘)>” + res.content[i].goods_name + “</li>”;
   }
  // alert(a);
   document.getElementById(‘show_stock’).innerHTML = a;
}
 </script>

我们输入框的代码：

<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;”/>
<div id=”List1″>
<div>
<ul style=”padding:0px; margin:0px;” id=”show_stock”>
</ul>
</div>
</div>

ajax请求php的代码

search_div.php

<?php
define(‘IN_ECS’, true);
require(dirname(__FILE__) . ‘/includes/init.php’);
require(dirname(__FILE__) . ‘/admin/includes/lib_main.php’);
if($_REQUEST[‘act’] == ‘search’){
  $keywords = json_str_iconv(trim($_GET[‘text’]));
  $sql = “SELECT goods_name,goods_id FROM ” . $GLOBALS[‘ecs’]->table(‘goods’).” where goods_name like ‘%$keywords%'”;
  $brand_array = $GLOBALS[‘db’]->getall($sql);
  foreach($brand_array as $ids =>$value)
  {
   $brand_array[$ids][‘goods_name’] = sub_str_xaphp($brand_array[$ids][‘goods_name’],5);
 
  }
  make_json_result($brand_array);
}
function sub_str_xaphp($str, $length = 0, $append = true)
{
    $str = trim($str);
    $strlength = strlen($str);
    if ($length == 0 || $length >= $strlength)
    {
        return $str;
    }
    elseif ($length < 0)
    {
        $length = $strlength + $length;
        if ($length < 0)
        {
            $length = $strlength;
        }
    }
    if (function_exists(‘mb_substr’))
    {
        $newstr = mb_substr($str, 0, $length, EC_CHARSET);
    }
    elseif (function_exists(‘iconv_substr’))
    {
        $newstr = iconv_substr($str, 0, $length, EC_CHARSET);
    }
    else
    {
        //$newstr = trim_right(substr($str, 0, $length));
        $newstr = substr($str, 0, $length);
    }
    if ($append && $str != $newstr)
    {
        $newstr .= ”;
    }
    return $newstr;
}
?>

在商品少的情况下，我们直接查询 如果多了，建议修改程序。