DedeCMS使用Ajax实现搜索下拉提示功能

  • 时间:
  • 浏览:0
作者:m22543 hihi 来源:用户投稿 浏览: 2012-8-14 11:27:14 字号:大 中 小

[摘要]搜索下拉提示是一个多多多很实用的功能,既增加了用户体验,也可不必须让用户快速的找到你要的东西,本文介绍dedecms 实现搜索下拉提示的法律方式。

  一点功能主要实现的是用户在搜索的很久输入关键字,然完正都是出現下拉菜单,下拉菜单中出現的是站内所有带有一点关键字的文章的标题共用户选者,相对DedeCMS原生的搜索一点功能实用一点,既增加了用户体验,也可不必须让用户快速的找到你要的东西。功能基于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();", 60 );

}

</script>

  jquery-1.7.1.min.js一点jquery库必须你另一方下载,这里就不要 说了。另一方用的是一点版本的。

  这段代码中的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" >

<div class="suggestionList"><ul id="autoSuggestionsList"></ul></div>

</div>

</form>

  这帕累托图可不必须根据你另一方的代码的实际情況具体修改,主就说 输入关键字的input和下边加的DIV层。

3、打开你另一方的样式表css文件,在最后加入

.suggestionsBox { position:relative; left:0px;width: 260

px; 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.rar,下载后解压得search_list.php到倒入/plus目录下。在一点文件里有完正注解。可根据实际情況调整。所有结果完正都是 由一点文件来返回的。最后去前台试试您的效果把。

  本文由似水星辰原创,本文原地址:http://www.sitejs.com/sitejs-12281-1.html

sssss
Tags: dedecms   搜索下拉提示  
责任编辑:mozi