web項目填寫表單時候select選項經常會有特別多，這時可以考慮使用Jquery Autocomplete插件，它能根據條件很好的定位指定選項。博主爲了優化此類現象，運用了自動完成插件，在這裏博主將結合實例分享給大家，也好自己做備份。
描述：自動完成功能根據用戶輸入值進行搜索和過濾，讓用戶快速找到並從預設值列表中選擇。
參考：博主用的是jquery-autocomplete-1.1.js版本，檢索內容由於是固定的所以定義了枚舉類來封裝數據源（如果檢索內容在數據庫中需要自己定義緩存，並且根據需要還有可能需要數據庫和緩存同步操作。），如下：
public enum NationType {
ASIA("AP", "Asia/Pacific Region"),
EUROPE("EU", "Europe"),
ANDORRA("AD", "Andorra"),
EMIRATES("AE", "United Arab Emirates"),
AFGHANISTAN("AF", "Afghanistan"),
BARBUDA("AG", "Antigua and Barbuda"),
ANGUILLA("AI", "Anguilla"),
ALBANIA("AL", "Albania"),
ARMENIA("AM", "Armenia"),
ANTILLES("AN", "Netherlands Antilles"),
ANGOLA("AO", "Angola"),
ANTARCTICA("AQ", "Antarctica"),
ARGENTINA("AR", "Argentina"),
AMERICANSAMOA("AS", "American Samoa"),
AUSTRIA("AT", "Austria"),
AUSTRALIA("AU", "Australia"),
ARUBA("AW", "Aruba"),
AZERBAIJAN("AZ", "Azerbaijan"),
HERZEGOVINA("BA", "Bosnia and Herzegovina"),
BARBADOS("BB", "Barbados"),
BANGLADESH("BD", "Bangladesh"),
BELGIUM("BE", "Belgium"),
FASO("BF", "Burkina Faso"),
BULGARIA("BG", "Bulgaria"),
BAHRAIN("BH", "Bahrain"),
BURUNDI("BI", "Burundi"),
BENIN("BJ", "Benin"),
BERMUDA("BM", "Bermuda"),
DARUSSALAM("BN", "Brunei Darussalam"),
BOLIVIA("BO", "Bolivia"),
BRAZIL("BR", "Brazil"),
BAHAMAS("BS", "Bahamas"),
BHUTAN("BT", "Bhutan"),
ISLAND("BV", "Bouvet Island"),
BOTSWANA("BW", "Botswana"),
BELARUS("BY", "Belarus"),
BELIZE("BZ", "Belize"),
CANADA("CA", "Canada"),
COCOS("CC", "Cocos (Keeling) Islands"),
CONGODEM("CD", "Congo, The Democratic Republic of the "),
CENTRAL("CF", "Central African Republic"),
CONGO("CG", "Congo"),
SWITZERLAND("CH", "Switzerland"),
DIVOIRE("CI", "Cote D'Ivoire"),
COOK("CK", "Cook Islands"),
CHILE("CL", "Chile"),
CAMEROON("CM", "Cameroon"),
CHINA("CN", "China"),
COLOMBIA("CO", "Colombia"),
COSTARICA("CR", "Costa Rica"),
CUBA("CU", "Cuba"),
CAPEVERDE("CV", "Cape Verde"),
CHRISTMAS("CX", "Christmas Island"),
CYPRUS("CY", "Cyprus"),
CZECH("CZ", "Czech Republic"),
GERMANY("DE", "Germany"),
DJIBOUTI("DJ", "Djibouti"),
DENMARK("DK", "Denmark"),
DOMINICA("DM", "Dominica"),
DOMINICAN("DO", "Dominican Republic"),
ALGERIA("DZ", "Algeria"),
ECUADOR("EC", "Ecuador"),
ESTONIA("EE", "Estonia"),
EGYPT("EG", "Egypt"),
WESTERN("EH", "Western Sahara"),
ERITREA("ER", "Eritrea"),
SPAIN("ES", "Spain"),
ETHIOPIA("ET", "Ethiopia"),
FINLAND("FI", "Finland"),
FIJI("FJ", "Fiji"),
FALKLAND("FK", "Falkland Islands (Malvinas)"),
MICRONESIA("FM", "Micronesia, Federated States of"),
FAROE("FO", "Faroe Islands"),
FRANCE("FR", "France"),
Metropolitan("FX", "France, Metropolitan"),
GABON("GA", "Gabon"),
KINGDOM("GB", "United Kingdom"),
GRENADA("GD", "Grenada"),
GEORGIA("GE", "Georgia"),
GUIANA("GF", "French Guiana"),
GHANA("GH", "Ghana"),
GIBRALTAR("GI", "Gibraltar"),
GREENLAND("GL", "Greenland"),
GAMBIA("GM", "Gambia"),
GUINEA("GN", "Guinea"),
GUADELOUPE("GP", "Guadeloupe"),
EQUATORIALGUINEA("GQ", "Equatorial Guinea"),
GREECE("GR", "Greece"),
SOUTHGEORGIA("GS", "South Georgia and the South Sandwich Islands"),
GUATEMALA("GT", "Guatemala"),
GUAM("GU", "Guam"),
BISSAU("GW", "Guinea-Bissau"),
GUYANA("GY", "Guyana"),
HONGKONG("HK", "Hong Kong"),
HEARDMCDONALD("HM", "Heard Island and McDonald Islands"),
HONDURAS("HN", "Honduras"),
CROATIA("HR", "Croatia"),
HAITI("HT", "Haiti"),
HUNGARY("HU", "Hungary"),
INDONESIA("ID", "Indonesia"),
IRELAND("IE", "Ireland"),
ISRAEL("IL", "Israel"),
INDIA("IN", "India"),
BRITISHINDIAN("IO", "British Indian Ocean Territory"),
IRAQ("IQ", "Iraq"),
ISLAMIC("IR", "Iran, Islamic Republic o"),
ICELAND("IS", "Iceland"),
ITALY("IT", "Italy"),
JAMAICA("JM", "Jamaica"),
JORDAN("JO", "Jordan"),
JAPAN("JP", "Japan"),
KENYA("KE", "Kenya"),
KYRGYZSTAN("KG", "Kyrgyzstan"),
CAMBODIA("KH", "Cambodia"),
KIRIBATI("KI", "Kiribati"),
COMOROS("KM", "Comoros"),
SAINT("KN", "Saint Kitts and Nevis"),
KOREADEMOCRATIC("KP", "Korea, Democratic People's Republic of"),
KOREAREPUBLIC("KR", "Korea, Republic of "),
KUWAIT("KW", "Kuwait"),
CAYMAN("KY", "Cayman Islands"),
KAZAKSTAN("KZ", "Kazakstan"),
LAO("LA", "Lao People's Democratic Republic"),
LEBANON("LB", "Lebanon"),
SAINTLUCIA("LC", "Saint Lucia"),
LIECHTENSTEIN("LI", "Liechtenstein"),
SRILANKA("LK", "Sri Lanka"),
LIBERIA("LR", "Liberia"),
LESOTHO("LS", "Lesotho"),
LITHUANIA("LT", "Lithuania"),
LUXEMBOURG("LU", "Luxembourg"),
LATVIA("LV", "Latvia"),
JAMAHIRIYA("LY", "Libyan Arab Jamahiriya"),
MOROCCO("MA", "Morocco"),
MONACO("MC", "Monaco"),
MOLDOVA("MD", "Moldova, Republic of "),
MADAGASCAR("MG", "Madagascar"),
MARSHALL("MH", "Marshall Islands"),
MACEDONIA("MK", "Macedonia, the Former Yugoslav Republic of"),
MALI("ML", "Mali"),
MYANMAR("MM", "Myanmar"),
MONGOLIA("MN", "Mongolia"),
MACAU("MO", "Macau"),
NORTHERNMARIANA("MP", "Northern Mariana Islands"),
MARTINIQUE("MQ", "Martinique"),
MAURITANIA("MR", "Mauritania"),
MONTSERRAT("MS", "Montserrat"),
MALTA("MT", "Malta"),
MAURITIUS("MU", "Mauritius"),
MALDIVES("MV", "Maldives"),
MALAWI("MW", "Malawi"),
MEXICO("MX", "Mexico"),
MALAYSIA("MY", "Malaysia"),
MOZAMBIQUE("MZ", "Mozambique"),
NAMIBIA("NA", "Namibia"),
NEWCALEDONIA("NC", "New Caledonia"),
NIGER("NE", "Niger"),
NORFOLK("NF", "Norfolk Island"),
NIGERIA("NG", "Nigeria"),
NICARAGUA("NI", "Nicaragua"),
NETHERLANDS("NL", "Netherlands"),
NORWAY("NO", "Norway"),
NEPAL("NP", "Nepal"),
NAURU("NR", "Nauru"),
NIUE("NU", "Niue"),
NEWZEALAND("NZ", "New Zealand"),
OMAN("OM", "Oman"),
PANAMA("PA", "Panama"),
PERU("PE", "Peru"),
POLYNESIA("PF", "French Polynesia"),
NEWGUINEA("PG", "Papua New Guinea"),
PHILIPPINES("PH", "Philippines"),
PAKISTAN("PK", "Pakistan"),
POLAND("PL", "Poland"),
PIERREMIQUELON("PM", "Saint Pierre and Miquelon"),
PITCAIRN("PN", "Pitcairn"),
PUERTORICO("PR", "Puerto Rico"),
PALESTINIAN("PS", "Palestinian Territory, Occupied"),
PORTUGAL("PT", "Portugal"),
PALAU("PW", "Palau"),
PARAGUAY("PY", "Paraguay"),
QATAR("QA", "Qatar"),
REUNION("RE", "Reunion"),
ROMANIA("RO", "Romania"),
RUSSIAN("RU", "Russian Federation"),
RWANDA("RW", "Rwanda"),
ARABIA("SA", "Saudi Arabia"),
SB("SB", "SB"),
SEYCHELLES("SC", "Seychelles"),
SUDAN("SD", "Sudan"),
SWEDEN("SE", "Sweden"),
SINGAPORE("SG", "Singapore"),
SAINTHELENA("SH", "Saint Helena"),
SLOVENIA("SI", "Slovenia"),
SVALBARDJANMAYEN("SJ", "Svalbard and Jan Mayen"),
SLOVAKIA("SK", "Slovakia"),
SIERRALEONE("SL", "Sierra Leone"),
SANMARINO("SM", "San Marino"),
SN("SN", "SN"),
SOMALIA("SO", "Somalia"),
SURINAME("SR", "Suriname"),
SAOTOMPRINCIPE("ST", "Sao Tome and Principe"),
ELSALVADOR("SV", "El Salvador"),
SYRIANARAB("SY", "Syrian Arab Republic"),
SWAZILAND("SZ", "Swaziland"),
TURKSCAICOS("TC", "Turks and Caicos Islands"),
CHAD("TD", "Chad"),
SOUTHERNTERRITORIES("TF", "French Southern Territories"),
TOGO("TG", "Togo"),
THAILAND("TH", "Thailand"),
TAJIKISTAN("TJ", "Tajikistan"),
TOKELAU("TK", "Tokelau"),
TURKMENISTAN("TM", "Turkmenistan"),
TUNISIA("TN", "Tunisia"),
TONGA("TO", "Tonga"),
EASTTIMOR("TP", "East Timor"),
TURKEY("TR", "Turkey"),
TRINIDADTOBAGO("TT", "Trinidad and Tobago"),
TUVALU("TV", "Tuvalu"),
TAIWAN("TW", "Taiwan"),
TANZANIA("TZ", "Tanzania, United Republic of"),
UKRAINE("UA", "Ukraine"),
UGANDA("UG", "Uganda"),
MINOROUTLYING("UM", "United States Minor Outlying Islands"),
UNITEDSTATES("US", "United States"),
URUGUAY("UY", "Uruguay"),
UZBEKISTAN("UZ", "Uzbekistan"),
HOLYSEE("VA", "Holy See (Vatican City State)"),
GRENADINES("VC", "Saint Vincent and the Grenadines"),
VENEZUELA("VE", "Venezuela"),
VIRGINBritish("VG", "Virgin Islands, British"),
VIRGIN("VI", "Virgin Islands, U.S."),
VIETNAM("VN", "Vietnam"),
VANUATU("VU", "Vanuatu"),
WALLISFUTUNA("WF", "Wallis and Futuna"),
SAMOA("WS", "Samoa"),
YEMEN("YE", "Yemen"),
MAYOTTE("YT", "Mayotte"),
YUGOSLAVIA("YU", "Yugoslavia"),
SOUTHAFRICA("ZA", "South Africa"),
ZAMBIA("ZM", "Zambia"),
ZAIRE("ZR", "Zaire"),
ZIMBABWE("ZW", "Zimbabwe"),
ANONYMOUS("A1", "Anonymous Proxy"),
SATELLITE("A2", "Satellite Provider"),
UNKONWN("unknown", "unknown"),
OTHER("O1", "Other");
private String code;
private String name;
private NationType(String code, String name) {
this.code = code;
this.name = name;
}
public static List<Map<String, String>> getList(String q) {
List<Map<String, String>> list = new LinkedList<Map<String, String>>();
for (NationType type : NationType.values()) {
if (StringUtils.isNotBlank(q)) {
if (type.getCode().toLowerCase().contains(q.toLowerCase()) || type.getName().toLowerCase().contains(q.toLowerCase())) {
Map<String, String> map = new HashMap<String, String>();
map.put("code", type.getCode());
map.put("name", type.getName());
list.add(map);
}
} else {
Map<String, String> map = new HashMap<String, String>();
map.put("code", type.getCode());
map.put("name", type.getName());
list.add(map);
}
}
return list;
}
/**
* Fetch instance by code.
*
* @param code
* @return
*/
public static NationType instanceOf(String code) {
for (NationType dateType : NationType.values()) {
if (StringUtils.equals(dateType.getCode(), code)) {
return dateType;
}
}
return NationType.UNKONWN;
}
/**
* @return the code
*/
public String getCode() {
return code;
}
/**
* @param code
* the code to set
*/
public void setCode(String code) {
this.code = code;
}
/**
* @return the name
*/
public String getName() {
return name;
}
/**
* @param name
* the name to set
*/
public void setName(String name) {
this.name = name;
}
} @ResponseBody
@RequestMapping(value = "nationtype.xxx")
public List<Map<String, String>> getInsertInfo(@RequestParam("q") String q) {
return NationType.getList(q);
}<input type="text" id="nationType" name="nationType" />(function($) {
Class('Xxx.xxxMain',{
init:function() {
this.opt ={rootId:"#root"};
this.root = $(this.opt.rootId);
this.initAutoComplete();
},
initAutoComplete: function() {
var acOptions = {
minChars : 0,
max : 10,
mustMatch : true,
cacheLength : 1,
multiple : false,
autoFill : true,
formatItem: function (row, i, max) {
return row.code + " [" + row.name + "]";
},
formatResult: function (row, i, max) {
return row.code;
}
};
$("#nationType").autocomplete("/nationtype.nhn",acOptions);
},
});
})(jQuery);
效果圖
| 屬性 | 類型 | 說明 |
|---|---|---|
| minChars | Number | 在觸發autoComplete前用戶至少需要輸入的字符數.Default: 1，如果設爲0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表 |
| width | Number | 指定下拉框的寬度. Default: input元素的寬度 |
| max | Number | autoComplete下拉顯示項目的個數.Default: 10 |
| delay | Number | 擊鍵後激活autoComplete的延遲時間(單位毫秒).Default: 遠程爲400 本地10 |
| autoFill | Boolean | 要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框. Default: false |
| mustMatch | Booolean | 如果設置爲true,autoComplete只會允許匹配的結果出現在輸入框,所有當用戶輸入的是非法字符時將會得不到下拉框.Default: false |
| matchContains | Boolean | 決定比較時是否要在字符串內部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false |
| selectFirst | Boolean | 如果設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,儘管它沒被手工選中(用鍵盤或鼠標).當然如果用戶選中某個項目,那麼就用用戶選中的值. Default: true |
| cacheLength | Number | 緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1爲不緩存.Default: 10 |
| matchSubset | Boolean | autoComplete可不可以使用對服務器查詢的緩存,如果緩存對foo的查詢結果,那麼如果用戶輸入foo就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大於1時有效.Default: true |
| matchCase | Boolean | 比較是否開啓大小寫敏感開關.使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false |
| multiple | Boolean | 是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false |
| multipleSeparator | String | 如果是多選時,用來分開各個選擇的字符. Default: "," |
| scroll | Boolean | 當結果集大於默認高度時是否使用卷軸顯示 Default: true |
| scrollHeight | Number | 自動完成提示的卷軸高度用像素大小表示 Default: 180 |
| formatItem | Function | 爲每個要顯示的項目使用高級標籤.即對結果中的每一行都會調用這個函數,返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的自然數), 當前結果數組元素的個數即項目的個數. Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值. |
| formatResult | Function | 和formatItem類似,但可以將將要輸入到input文本框內的值進行格式化.同樣有三個參數,和formatItem一樣.Default: none,表示要麼是隻有數據,要麼是使用formatItem提供的值. |
| formatMatch | Function | 對每一行數據使用此函數格式化需要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row |
| extraParams | Object | 爲後臺(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {} |
| result | handler | 此事件會在用戶選中某一項後觸發，參數爲：event: 事件對象. event.type爲result.data: 選中的數據行.formatted:formatResult函數返回的值.例如：$("#singleBirdRemote").result(function(event, data, formatted) {});//如選擇後給其他控件賦值，觸發別的事件等等 |