jquery suggest插件

本插件是制作类似于百度、google匹配提示输入内容的网页效果

插件是基于DWR提供的ajax通讯方式实现的。

下载地址链接：http://download.csdn.net/source/1852361

现介绍使用方法，下载解压完之后，lib目录下的文件如下：

安装使用步骤:

步骤	说明
1.	首先确定JavaEE工程已经正确配置好了DWR(不知道怎么配置请参考官方网站[http://directwebremoting.org/])
2.	将jquery.suggest.js 和 jquery.suggest.css 文件拷到你的web工程的webroot下,如果项目里没有jquery的话，就把连jquery-1.3.2.min.js也一起放到工程下
3.	将jquery-dwr-suggest.jar 拷到工程的lib下，并设置到工程的编译环境下来。
4.	新建并配置自己匹配服务的DWR服务类.例如我这里新建配置是的TestDWRService并实现 com.manbu.suggest.ISuggestService 接口 这样此服务类提供 public List<ISuggestBean> suggestExecute(String text, Map<String, String> parameter) [方法说明见下面]接口方法, 此方法里根据输入参数内容实现模糊查询数据库操作，并返回javabean 的List。 此javabean要求实现com.manbu.suggest.ISuggestBean 接口,可用库下一个默认的实现类com.manbu.suggest.DefaultSuggestBean, 此默认的javabean只默认提供了id 和 text属性，如果要实现给页面传送多个属性,可写自己的javabean, 这里要说明一点的是，text属性是页面中显示的属性。
5.	我写的测试程序,随机产生一些测试数据，没有数据库数据。程序如下：
6.	dwr.xml配置文件中如下
7.	JSP程序如下:
8.	运行服务并浏览器(现只有IE浏览器测试通过)打开此页面，即可显示效果.

程序说明：

1.服务接口方法说明

    接口com.manbu.suggest.ISuggestService的待实现方法

       public List suggestExecute(String text, Map<String, String> parameter)
       String text   即是客户端浏览控件当前的文本值。
       Map<String,String> parameter 即是客户端js部分传的参数 parameter:{"count":"10"};

    接口com.manbu.suggest.ISuggestBean的待实现方法

      此类要求javabean实现有id属性和text属性，其中text为页面显示出的条目内容。自己的实现类可以扩展自己需要的属性。

2.程序调用说明

<link rel="stylesheet" type="text/css" href="jquery.suggest.css" />
<script language="javascript" src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery.suggest.js" type="text/javascript"></script>
<script type='text/javascript' src='dwr/interface/TestDWRService.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>

记住一定要导入util.js这个工具类。

$(document).ready(function(){
$("#txtName").suggest({
dwr:TestDWRService,
option:{
style:{
width:"150px"
},
setSuggestData:function(data){
return true;
}
},
parameter:{"count":"10"}
});
});

其中的dwr属性，是dwr提供服务的的类，上面<script type='text/javascript' src='dwr/interface/TestDWRService.js'></script>导入的

option

style属性，设置匹配提示框的宽度，框的颜色等样式里面还有

cellFuncs

rowCreator

cellCreator

上面三个属性，是dwr.util.addRows()方法里的一个参数，不熟悉的参考[http://fzfx88.javaeye.com/blog/73605]

selectedRowClass 属性，是匹配提示的框，鼠标移上去的样式类名。

setSuggestData 函数，是确定选择匹配出来的数据时调用的方法，setSuggestData:function(date){return true;},参数data是当前选中的那行的javabean

返回值：true,匹配框关闭，文本控件设置上当前选中的文本内容。
false,匹配框关闭，文本控件不设置上当前选中的文本内容。

parameter 传到server端的参数

 

最后

以上就是高高百褶裙最近收集整理的关于jquery suggest插件的全部内容，更多相关jquery内容请搜索靠谱客的其他文章。