介绍一款ajax的auotocomplete框架

来源：互联网发布：合肥java程序员工资编辑：程序博客网时间：2024/05/02 01:12

　介绍一款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">

}
</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框架的用法