织梦实现百度搜索下拉菜单提示信息功能

百度站内搜索”也比较成熟了,可以设置站内搜索还是全网搜索,还能获得广告费用,许多人就放弃DedeCMS原生的搜索功能。如果能实现和百度搜索一样下拉菜单来对本站标题AJAX预加载,效率会高许多,DedeCMS搜索功能比较强大,不妨利用AJAX实现这个小功能。也算是对AJAX的一种应用。

百度搜索下拉菜单

织梦实现百度搜索下拉菜单提示信息功能

(此图片来源于网络,如有侵权,请联系删除! )

 

在需要增加该功能的模板</head>之前增加js代码

 

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  <script type="text/javascript">       function lookup(inputString) {           if(inputString.length == 0) {               // Hide the suggestion box.               $('#suggestions').hide();           } else {               $.post("{dede:global.cfg_cmspath/}/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>

在/plus/下增加search_list.php,代码如下

 为保证数据安全,数据库调用以下橙色部分的还是规定范围。

  <?php  header("Content-Type: text/html;charset=utf-8");  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,typeid FROM dede_archives WHERE title LIKE '%$queryString%' and arcrank=0 order by click desc LIMIT 10");    $dsql->Execute();    while ($result = $dsql->GetArray()) {     $bb=$result["title"];     //把查询到的标题存入$bb     $bb=str_ireplace($queryString, '<font color='red'>'.$queryString.'</font>', $bb);     //使查询到的关键字为红色,更改color后边的颜色代码,可以改变颜色。     $a=$result["typeid"];      $row=$dsql->GetOne("SELECT typedir,id FROM dede_arctype WHERE id=$a");     $aa=$row['typedir'];     $aa=str_replace("{cmspath}",$cfg_basehost,$aa);//绝对路径处理     $id=$result['id'];     echo '<li><a target="_blank" href="'.$aa.'/'.$id.'.html">'.$bb.'</a></li>';    }   }else{    }  }else{  echo '参数为空!!';  }  ?>

 

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}

上面的修改方法只适合utf-8版本的织梦,utf-8称为万国码,兼容性更强,听说一些手机还不兼容gbk,此教程适合织梦静态URL。

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容