jquery autocomplete插件結合ajax使用demo

autocomplete是jqueryUI裏的一個插件jquery

效果和說明能夠訪問這裏,做用相似於搜索時的自動提示:ajax

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

今天項目中用到了這個插件json

首先是引入文件,除了juqery和juqeryUI的基本文件外,還須要引入下面的文件緩存

<!-- autocomplete -->
    <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.core.js"></script>
    <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.widget.js"></script>
    <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.position.js"></script>
    <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.autocomplete.js"></script>
接下來就是使用,js文件以下:
$( "#tags" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "sql/sqlgetWebsqlDataBaseInforAjax",
                    dataType: "json",
                    data:{
                        searchDbInforItem: request.term
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                dbId:item.dbid,
                                jdbcUrl:item.jdbcUrl,
                                ip:item.ip,
                                port:item.port,
                                sch:item.sch,
                                username: item.username,
                                password:item.password,
                                value: item.labelview
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
                $("#dbInforDdId").val(ui.item.dbId);
                $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
                $("#dbInforIp").val(ui.item.ip);
                $("#dbInforPort").val(ui.item.port);
                $("#dbInforSch").val(ui.item.sch);
                $("#dbInforUserName").val(ui.item.username);
                $("#dbInforPassword").val(ui.item.password);
            }
        });
這段腳本是給tag這個input加入autocomplete插件,而後經過request.term取到模糊搜索的詞,而後調用ajax返回一個json串到response中,其中用到了一個map函數。而後實現select方法,即把response的item經過ui.item寫入到各個input中。實現數據自動填充。

其中,有個label和value參數,lable是下拉框中顯示的值,value是選中後自動填充的值,能夠分別設置,也能夠只設置一個,例如我就只設置一個value。函數

效果以下:jsonp

 

接下來,對這個腳本加以改進,加入cache,這樣就不用每次都經過ajax來獲取。改進的腳本以下:ui

 

//autocomplete插件
        //緩存
        var cache = {};
        $( "#tags" ).autocomplete({
            source: function(request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( $.map( cache[ term ], function( item ) {
                        return {
                            dbId:item.dbid,
                            jdbcUrl:item.jdbcUrl,
                            ip:item.ip,
                            port:item.port,
                            sch:item.sch,
                            username: item.username,
                            password:item.password,
                            value: item.labelview
                        }
                    }));
                    return;
                }
                $.ajax({
                    url: "sql/sqlgetWebsqlDataBaseInforAjax",
                    dataType: "json",
                    data:{
                        searchDbInforItem: request.term
                    },
                    success: function( data ) {
                        cache[ term ] = data;
                        response( $.map( data, function( item ) {
                            return {
                                dbId:item.dbid,
                                jdbcUrl:item.jdbcUrl,
                                ip:item.ip,
                                port:item.port,
                                sch:item.sch,
                                username: item.username,
                                password:item.password,
                                value: item.labelview
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
                $("#dbInforDdId").val(ui.item.dbId);
                $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
                $("#dbInforIp").val(ui.item.ip);
                $("#dbInforPort").val(ui.item.port);
                $("#dbInforSch").val(ui.item.sch);
                $("#dbInforUserName").val(ui.item.username);
                $("#dbInforPassword").val(ui.item.password);
            }
        });

效果是同樣的,只是第二次的時候從緩存中取得了數據不用再調用ajax了。url

總結一下,autocomplete是jqueryUI的一個插件,能夠實現自動填充的功能。它的source支持string和ajax傳過來的json,另外還支持jsonp(沒有深刻研究)。能夠改進腳本,加入cache來減小ajax的請求。插件

相關文章
相關標籤/搜索