龙行天下

  政 博
随笔 - 23, 文章 - 0, 评论 - 12, 引用 - 0
数据加载中……

用script.aculo.us实现像google suggest自动完成功能

 

实现像google suggest自动完成功能

首先创建一个jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<style>
div.auto_complete {
  width: 350px;
  background: #fff;
}
div.auto_complete ul {
  border:1px solid #888;
  margin:0;
  padding:0;
  width:100%;
  list-style-type:none;
}
div.auto_complete ul li {
  margin:0;
  padding:3px;
}
div.auto_complete ul li.selected {
  background-color: #ffb;
}
div.auto_complete ul strong.highlight {
  color: #800;
  margin:0;
  padding:0;
}
</style>

</head>
<body>
<input type="text" id="autocomplete"/>
<div id="results" class="auto_complete"></div>
<script type="text/javascript">
 new Ajax.Autocompleter(
  "autocomplete",
  "results",
  "list.html", {
   method: "GET"
  }
 );
</script>
</body>
</html>

 

list.html

<ul>
<li>Aria</li>
<li>Aaaa</li>
<li>Afdsa</li>
<li>bsa</li>
</ul>

上面list.html采用静态页面返回列表,读者可以使用动态页面返回结果。

posted on 2008-01-03 09:20 feingto 阅读(1934) 评论(3)  编辑  收藏 所属分类: Ajax、JAVASCRIPT

评论

# re: 用script.aculo.us实现像google suggest自动完成功能  回复  更多评论   

请教,“Ajax.Autocompleter”在哪个包里?可否把包放出来
2008-06-19 10:30 | sheng

# re: 用script.aculo.us实现像google suggest自动完成功能  回复  更多评论   

直接去下载
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
下载地址去百度搜索,到处都有
2008-06-19 12:24 | feing痛殴

# re: 用script.aculo.us实现像google suggest自动完成功能  回复  更多评论   

Very good!

赫赫,有意思!
2008-09-22 14:23 | charry

只有注册用户登录后才能发表评论。


网站导航: