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

ecshop搜索栏效果如下

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

复制代码

以下代码需要加到输入框普遍比如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;
}
?>

复制代码

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

(责任编辑：好模板)