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

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 class="Menu" id="List1">

<div class="Menu2">

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

}

?>

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