autocomplete插件能帮助我们实现类似于Google Suggest的效果:
插件首页:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
插件文档:
http://docs.jquery.com/Plugins/Autocomplete
配置说明:
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions
本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:
实例代码:
<% @ Page Language = " C# " %> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head id ="Head1" runat ="server" > < title > jQuery PlugIn - 自动完成插件实例 AutoComplete </ title > <!-- black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader --> < link rel ="stylesheet" type ="text/css" href ="<%=WebConfig.ResourceServer +" /JsLib/jquery/themes/redmond/style.css"% > " /> < link rel ="stylesheet" type ="text/css" href ="<%=WebConfig.ResourceServer +" /JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.css"% > " /> < script type ="text/javascript" src ="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js" ></ script > < script type ="text/javascript" src ="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" ></ script > < script type ="text/javascript" src ="<% =WebConfig.ResourceServer %>/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.min.js" ></ script > <% if ( false ) { %> < script src ="~/js/jquery-vsdoc-lastest.js" type ="text/javascript" ></ script > <% } %> < script type ="text/javascript" > /* ========== 必须放在头部加载的语句块. 尽量避免使用 ========== */ </ script > < style type ="text/css" > body { font-size : 12px ; } .formLabel { float : left ; width : 150px ; text-align : right ; } .formInput { float : left ; } </ style > </ head > < body > <!-- Demo. 应用AutoComplete插件 --> < div class ="ui-widget ui-widget-content ui-corner-all" style ="width: 700px; padding: 5px;" > < h3 > Demo. 应用AutoComplete插件 </ h3 > < br style ="clear: both" /> < div class ="formLabel" > < label for ="inputCityName" > 请输入城市拼音和汉字: </ label > </ div > < div class ="formInput" > < input id ="inputCityName" name ="inputCityName" type ="text" /> </ div > < br style ="clear:both" /> < br style ="clear: both" /> < div class ="formLabel" > < label for ="inputCityName" > 城市ID: </ label ></ div > < div class ="formInput" > < input id ="inputCityId" name ="inputCityId" type ="text" /></ div > < br style ="clear: both" /> < br style ="clear: both" /> </ div > < script type ="text/javascript" > /* ==========用户自定义方法========== */ // 城市数据 var cityList; // autocomplete选项 var options = { minChars: 1 , max: 500 , width: 250 , matchContains: true , formatItem: function (row, i, max) { return i + " / " + max + " : \ "" + row.CityNameEn + " \ " [ " + row.CityName + " ] " ; }, formatMatch: function (row, i, max) { return row.CityNameEn + " " + row.CityName; }, formatResult: function (row) { return row.CityName; } }; // autocomplete初始化函数 function initAutoComplete(data) { cityList = data; $( " #inputCityName " ).autocomplete(cityList, options); $( " #inputCityName " ).result( function (event, data, formatted) { $( " #inputCityId " ).val(data.ElongCityId); }); } /* ==========事件绑定========== */ $( function () { }); /* ==========加载时执行的语句========== */ $( function () { // 加载城市数据, 并在回调函数中用返回的数据初始化autocomplete $.getJSON( " cityinfo.htm " , null , initAutoComplete) }); </ script > </ body > </ html >
转载于:https://www.cnblogs.com/zento/archive/2011/10/12/2209499.html
相关资源：JAVA上百实例源码以及开源项目