jquery autocomplete插件结合ajax使用demo

最新推荐文章于 2022-07-12 17:36:22 发布

shanliangliuxing

最新推荐文章于 2022-07-12 17:36:22 发布

阅读量1.1k

点赞数

分类专栏： jquery autocomplete

jquery autocomplete 专栏收录该内容

7 篇文章

订阅专栏

转自：http://my.oschina.net/zimingforever/blog/63877

autocomplete是jqueryUI里的一个插件

效果和说明可以访问这里，作用类似于搜索时的自动提示：

http://jqueryui.com/demos/autocomplete/#default

今天项目中用到了这个插件

首先是引入文件，除了juqery和juqeryUI的基本文件外，还需要引入下面的文件

 
   1<!-- autocomplete --> 
 
   2<script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.core.js"></script>
 
   3<script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.widget.js"></script>
 
   4<script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.position.js"></script>
 
   5<script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.autocomplete.js"></script>

接下来就是使用,js文件如下：

 
   01$( "#tags").autocomplete({ 
 
   02            source:function( request, response ) {
 
   03                $.ajax({
 
   04                    url:"sql/sqlgetWebsqlDataBaseInforAjax",
 
   05                    dataType:"json", 
 
   06                    data:{
 
   07                        searchDbInforItem: request.term
 
   08                    },
 
   09                    success:function( data ) {
 
   10                        response( $.map( data,function( item ) {
 
   11                            return{ 
 
   12                                dbId:item.dbid,
 
   13                                jdbcUrl:item.jdbcUrl,
 
   14                                ip:item.ip,
 
   15                                port:item.port,
 
   16                                sch:item.sch,
 
   17                                username: item.username,
 
   18                                password:item.password,
 
   19                                value: item.labelview
 
   20                            }
 
   21                        }));
 
   22                    }
 
   23                });
 
   24            },
 
   25            minLength: 1,
 
   26            select:function( event, ui ) {
 
   27                $("#dbInforDdId").val(ui.item.dbId);
 
   28                $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
 
   29                $("#dbInforIp").val(ui.item.ip);
 
   30                $("#dbInforPort").val(ui.item.port);
 
   31                $("#dbInforSch").val(ui.item.sch);
 
   32                $("#dbInforUserName").val(ui.item.username);
 
   33                $("#dbInforPassword").val(ui.item.password);
 
   34            }
 
   35        });

这段脚本是给tag这个input加入autocomplete插件，然后通过request.term取到模糊搜索的词，然后调用ajax返回一个json串到response中，其中用到了一个map函数。然后实现select方法，即把response的item通过ui.item写入到各个input中。实现数据自动填充。

其中，有个label和value参数，lable是下拉框中显示的值，value是选中后自动填充的值，可以分别设置，也可以只设置一个，例如我就只设置一个value。

效果如下：

接下来，对这个脚本加以改进，加入cache，这样就不用每次都通过ajax来获取。改进的脚本如下：

 
   01//autocomplete插件 
 
   02        //缓存
 
   03        varcache = {}; 
 
   04        $("#tags" ).autocomplete({
 
   05            source:function(request, response ) {
 
   06                varterm = request.term; 
 
   07                if( term incache ) { 
 
   08                    response( $.map( cache[ term ],function( item ) {
 
   09                        return{ 
 
   10                            dbId:item.dbid,
 
   11                            jdbcUrl:item.jdbcUrl,
 
   12                            ip:item.ip,
 
   13                            port:item.port,
 
   14                            sch:item.sch,
 
   15                            username: item.username,
 
   16                            password:item.password,
 
   17                            value: item.labelview
 
   18                        }
 
   19                    }));
 
   20                    return;
 
   21                }
 
   22                $.ajax({
 
   23                    url:"sql/sqlgetWebsqlDataBaseInforAjax",
 
   24                    dataType:"json", 
 
   25                    data:{
 
   26                        searchDbInforItem: request.term
 
   27                    },
 
   28                    success:function( data ) {
 
   29                        cache[ term ] = data;
 
   30                        response( $.map( data,function( item ) {
 
   31                            return{ 
 
   32                                dbId:item.dbid,
 
   33                                jdbcUrl:item.jdbcUrl,
 
   34                                ip:item.ip,
 
   35                                port:item.port,
 
   36                                sch:item.sch,
 
   37                                username: item.username,
 
   38                                password:item.password,
 
   39                                value: item.labelview
 
   40                            }
 
   41                        }));
 
   42                    }
 
   43                });
 
   44            },
 
   45            minLength: 1,
 
   46            select:function( event, ui ) {
 
   47                $("#dbInforDdId").val(ui.item.dbId);
 
   48                $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
 
   49                $("#dbInforIp").val(ui.item.ip);
 
   50                $("#dbInforPort").val(ui.item.port);
 
   51                $("#dbInforSch").val(ui.item.sch);
 
   52                $("#dbInforUserName").val(ui.item.username);
 
   53                $("#dbInforPassword").val(ui.item.password);
 
   54            }
 
   55        });