添加到桌面   加入收藏

dedecms织梦使用ajax实现搜索下拉提示功能

08-05 16:14 来源:未知 编辑:admin  人气:   点评:评论一下 刷新: 刷新文章

这个功能主要实现的是用户在搜索的时候输入关键字,然后会出现下拉菜单,下拉菜单中出现的是站内所有包含这个关键字的文章的标题共用户选择,这个功能相对实用一点,即增加了用户体验,也可以让用户快速的找到想要的东西。功能基于php+jquery来实现,参考autocomplete,效果图如下:

下面讲解下具体实现步骤:

1、打开你的网站首页模板,在</head>之前加入

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function lookup(inputString) { 
        if(inputString.length == 0) { 
            // Hide the suggestion box. 
            $('#suggestions').hide(); 
        } else { 
            $.post("/plus/search_list.php", {queryString: ""+inputString+""}, function(data){ 
                if(data.length >0) { 
                    $('#suggestions').show(); 
                    $('#autoSuggestionsList').html(data); 
                } 
            }); 
        } 
    } // lookup 
     
    function fill(thisValue) { 
        $('#inputString').val(thisValue); 
        setTimeout("$('#suggestions').hide();", 200); 
    } </script> 

  jquery-1.7.1.min.js这个jquery库需要你自己下载,这里就不多说了。1.8的也测试过可以,具体使用什么版本的再此不多说。

  这段代码中的search_list.php在下面,保存了以后,放入/plus目录下。

2、打开head.htm,找到搜索部分的from表单代码修改为
 

<form name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php" id="formkeyword"> <label for="header-subscribe-email" class="text"> </label> <input type="hidden" name="kwtype" value="0" /> <input type="text" name="q" size="24" value="在这里搜索..." onfocus="if(this.value=='在这里搜索...'){this.value='';}" onblur="if(this.value==''){this.value='在这里搜索...';}" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" class="f-text"> <input type="submit" class="commit" value="搜索" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="suggestionList"><ul id="autoSuggestionsList"></ul></div> </div> </form> 

  这部分可以根据你自己的代码的实际情况具体修改,主要是输入关键字的input和下边加的DIV层。

3、打开你自己的样式表css文件,在最后加入
 

.suggestionsBox { position:relative; left:0px;width: 250px; background: white;border: 1px solid #dcdcdc;color: #323232; z-index:999; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; position:relative;padding: 3px; cursor: pointer;list-style:none;padding-left:5px;height:20px;overflow:hidden} .suggestionList li:hover { background-color: #659CD8; } .jr{position:absolute;top:9px;right:-5px} 

  此样式可以根据自己的网站定义噢。

  到这添加的代码就完了,然后吧下面的代码复制一下,保存为search_list.php并到放入/plus目录下。在这个文件里有详细注解。可根据实际情况调整。所有结果都是由这个文件来返回的。最后去前台试试您的效果把。

<?php
/*
请认真阅读每句话后的注释
作者:似水星辰
案例网站:http://www.feizhuyun.net
版权所有,请保留此段说明。
*/
header("Content-Type: text/html;charset=utf-8");
//文件编码,如果你是gb2312,哪就改成gbk
require_once(dirname(__FILE__)."/../include/common.inc.php");
//引入配置文件
global $dsql;
//全局变量
if(isset($_POST['queryString'])) {
	$queryString = $_POST['queryString'];
	//传入参数赋值
	if(strlen($queryString) >0) {
		$dsql->SetQuery("SELECT id,title,click FROM dede_archives WHERE title LIKE '%$queryString%' and arcrank=0 order by click desc LIMIT 5");
		//数据库查询,这里是关键,可调整表和字段,调整这里可以条用全站数据,本功能不建议访问量巨大的站使用,这里可能会引起崩溃。
		$dsql->Execute();
		while ($result = $dsql->GetArray()) {
			$bb=$result["title"];
			//把查询到的标题存入$bb
			$bb=str_ireplace($queryString, '<b><font color=\'red\'>'.$queryString.'</font></b>', $bb);
			//使查询到的关键字为红色,更改color后边的颜色代码,可以改变颜色。
			echo '<li onClick="fill(\''.$result["title"].'\');">'.$bb.'<a class="jr" href="/plus/view.php?aid='.$result["id"].'" title="打开连接"><img src="//www.feizhuyun.net/skin/images/gourl.png" alt="打开连接" /></a></li>';
			//输出结果,fill(\''.$result["title"].'\')这个里边的结果不能包含html代码,否则不能选择。
			//echo '<li onClick="fill(\''.$result["title"].'\');">'.$result["title"].'</li>';//如果不想变色。就把这句的注释删掉,把上边那句echo删掉。
		}
	} else {
	} 
} else {
	echo '参数为空!!';
}

[提醒] 除特别声明外,该内容由( 飞猪云教程)发布,转载请保留文章出处!
评论专区 更多评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。审核后显示,广告灌水违法言论将删除!
你的观点:
用户名最多输入8个字。
用户名:  验证码:点击我更换图片   详细评论
最新评论