jquery autocomplete插件結合ajax使用demo

autocomplete是jqueryUI里的一個插件

效果和說明可以訪問這里，作用類似于搜索時的自動提示：

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

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

首先是引入文件，除了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。

效果如下：

 

接下來，對這個腳本加以改進，加入cache，這樣就不用每次都通過ajax來獲取。改進的腳本如下：

 

//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了。

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