介绍一款ajax的auotocomplete框架,老外的作品,http://www.createwebapp.com,
叫createwebapp's javascript autocomplete widget,下面用php来介绍之
1 下载
2 建立一张表 CREATE TABLE `temp` ( `id` int(10) unsigned NOT NULL auto_increment, `content` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; 就是关键字表
3 search.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript" src="autocomplete/javascripts/prototype.js"></script> <script type="text/javascript" src="autocomplete/javascripts/autocomplete.js"></script> <link rel="stylesheet" type="text/css" href="autocomplete/styles/autocomplete.css" /> <script type="text/javascript">
var ajax=new AJAXRequest(); //提交搜索 function search(){ var element = document.getElementById("result"); ajax.postf( "p", //function(obj) {alert(obj.responseText)}, function(obj) {element.innerHTML = '<div class="search"> 以下是搜索结果</div>'+obj.responseText;}, "update.php", "POST" ); } //搜索分页Ajax function show2(add,page){ var element = $("result"); element.innerHTML = "<h3>loading data...</h3>"; ajax.get( "update.php?action=search&add="+add+"&page="+page, function(obj) {element.innerHTML = '<div class="search"> 以下是第'+page+'页</div>'+obj.responseText;})
} </script> </head> <body onload="show2('',1)"> <form action="update.php" method="post" id="p"> <p> <input name="keyword" id="aj" style="margin-top:20px;width:250px;height:40px;"> </p> <p> <input type="hidden" name="action" value="search" /> <input name="" type="button" value="提交查询" onclick= "search()" style="margin-top:20px;width:250px;height:40px;"/> </p> </form> <script> new Autocomplete("keyword",function() { return "update.php?action=boot&q=" + this.value; }); </script> <div id="result"></div> </body> </html>
3 自动完成功能中,实际上就查数据库有无记录,无的话把记录增加,有的话,把使用次数加1
<?php require_once('global.php'); header("content-Type: text/html; charset=UTF-8"); if($_POST['action'] == 'save') { if($DB->query("INSERT INTO temp (content) VALUES ('$content ')")){ echo "提交成功了!<a href="update.html">返回</a>"; } }if ($action == 'search'){ $pagenum=3; $page = intval($_GET['page']); if(!empty($page)) { $start_limit = ($page - 1) * $pagenum; } else { $start_limit = 0; $page = 1; } if(isset($_GET['add'])){ if(safe_check($_GET['add'])){ die('非法参数!'); }else { $add=$_GET['add']; } }else { $add=""; } if ($_POST['keyword']!="") { $key=$_POST['keyword']; $obj=$DB->fetch_one_array("SELECT * FROM temp1 where keyword='$key'"); if(empty($obj)){ $DB->query("insert into temp1(keyword,num)values('$key',1)"); }else{ $old=$obj[num]+1; $DB->query("update temp1 set num='$old' where keyword='$key'"); } $add = "where content LIKE '%$_POST[keyword]%'"; } $query = $DB->query("SELECT * FROM temp $add ORDER BY id DESC LIMIT $start_limit,".$pagenum); $tatol=$DB->num_rows($DB->query("SELECT * FROM temp $add ORDER BY id DESC")); $page_page = page_search($tatol,$pagenum,$page,""); if(!$tatol) { die("没有查询到任何信息"); } print<<<EOT <h2>列表</h2> <ul> EOT; while ($top = $DB->fetch_array($query)){ $temp=trimmed_title(htmlspecialchars(addslashes(str_replace(array("rn","n","r"),'',$top['content']))),30); print<<<EOT <li>($top[id])$temp</li> EOT; } print<<<EOT </ul> $page_page EOT; unset($top); $DB->free_result($query); }
if ($action == 'boot'){ if(isset($_GET['q'])){ if(safe_check($_GET['q'])){ die('非法参数!'); }else { $q=$_GET['q']; $q = str_replace("_","_",$q); $q = str_replace("%","%",$q); } } $list=array(); $query = $DB->query("SELECT * FROM temp1 where keyword LIKE '%$q%'"); while ($temp = $DB->fetch_array($query)){ print<<<EOT <li onselect="this.text.value = '$temp[keyword]'; ">$temp[keyword]($temp[num]) </li> EOT; } unset($temp); $DB->free_result($query); }
// 搜索分页函数 function page_search($num,$perpage,$curpage,$mpurl) { global $add; $add=urlencode($add); $multipage = ''; $mpurl .= strpos($mpurl,'?') ? '&' : '?'; if($num > $perpage) { $page = 10; $offset = 5; $pages = @ceil($num / $perpage); if($page > $pages) { $from = 1; $to = $pages; } else { $from = $curpage - $offset; $to = $curpage + $page - $offset - 1; if($from < 1) { $to = $curpage + 1 - $from; $from = 1; if(($to - $from) < $page && ($to - $from) < $pages) { $to = $page; } } elseif($to > $pages) { $from = $curpage - $pages + $to; $to = $pages; if(($to - $from) < $page && ($to - $from) < $pages) { $from = $pages - $page + 1; } } } $curpage1=$curpage-1; $curpage2=$curpage+1; $multipage = ($curpage - $offset > 1 && $pages > $page ? "<a href="#" onclick="show2('$add','1');return false;" >第一页</a> " : '').($curpage > 1 ?"<a href="#" onclick="show2('$add','$curpage1');return false;">上一页</a> " : ''); for($i = $from; $i <= $to; $i++) { $multipage .= $i == $curpage ? $i.' ' : "<a href="#" onclick="show2('$add','$i');return false;" >[$i]</a> "; } $multipage .= ($curpage < $pages ? "<a href="#" onclick="show2('$add','$curpage2');return false;" >下一页</a>" : '').($to < $pages ? " <a href="#" onclick="show2('$add','$pages');return false;">最后一页</a>" : ''); $multipage = $multipage ? '分页: '.$multipage : ''; } return $multipage; }
function safe_check($sql_str) { return eregi('select|insert|update|delete|/*|*|../|./|union|into|load_file|outfile',$sql_str); // 进行过滤 } ?>
注意这里<li onselect="this.text.value = '$temp[keyword]'; ">$temp[keyword]($temp[num]) </li> 必须满足autocomplete框架的用法 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|