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的請求。插件