介紹一款ajax的auotocomplete架構，老外的作品，http://www.createwebapp.com,
叫createwebapp's javascript autocomplete widget,下面用php來介紹之
1 下載
２ 建立一張表
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 ;
就是關鍵字表
３ 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 自動完成功能中，實際上就查資料庫有無記錄，無的話把記錄增加，有的話，把使用次數加１
<?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("\r\n","\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架構的用法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
