源代碼
點擊運行
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成(Autocomplete) - 多個值</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // 當選擇一個條目時不離開文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // 回到 autocomplete,但是提取最後的條目 response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // 防止在獲得焦點時插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除當前輸入 terms.pop(); // 添加被選項 terms.push( ui.item.value ); // 添加佔位符,在結尾添加逗號+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">編程語言:</label> <input id="tags" size="50"> </div> </body> </html>
運行結果