介绍一款ajax的auotocomplete框架
2008-08-30 11:06
183 查看
介绍一款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框架的用法
叫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框架的用法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 介绍一款ajax的auotocomplete框架
- 介绍一款ajax的auotocomplete框架
- AJAX 框架介绍
- prototype.js开发笔记（针对Ajax的JS框架Prototype的使用介绍）
- 原创js自动补全---auotocomplete
- 介绍一款python界面框架——“二胡”
- UCML Ajax++框架介绍
- Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍
- 介绍几个不错的开发Web App & Ajax的框架
- ajax几种主要的流行的框架介绍
- ASP.NET Ajax client-side framework failed to load OR ‘Sys’ is undefined(ASP.NET Ajax 客户端框架未能加载)
- karloop介绍－－hello world大家好，今天为大家介绍一款非常轻量级的的web开发框架，karloop框架。使用python开发 首先我们下载karloop源码进行安装。 源码地址 下载成
- 一款炫酷的幻灯片播放框架介绍（附demo及使用方法）
- 介绍几个不错的开发Web App & Ajax的框架
- 介绍一款封装非常好的loading框架AVLoadingIndicatorView
- [转]prototype.js开发笔记（针对Ajax的JS框架Prototype的使用介绍）
- Ajax基础 (十一)---代码测试，资源及框架介绍
- extjs jquery dwr ajax flex等web前端框架技术介绍
- Ajax技术和DWR框架介绍