jQuery UI の Autocomplete プラグインを使った、オートコンプリート（自動入力補完）機能についての記事。文字列候補がたくさんある場合、スクロールバーを出現させるタイプ。
予め用意した文字列から、入力欄に入力した文字を含んでいる文字列を探し出し、入力欄の下に表示させることができる。表示された文字列候補を選択すると、入力欄に現れる。候補がたくさんある場合、スクロールバーを出現させる。
実装例（サンプル）
実装例の動作について
入力欄に、「a」と入力すると、入力欄の下に、abap、actionscript、actionscript3、ada などが現れる。文字列候補がたくさんあるので、スクロールバーが出現する。actionscript を選択すると、入力欄に「actionscript」が現れる。
実装例のソースコード
読み込み
読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
var computerLanguages = [
'abap',
'actionscript',
'actionscript3',
'ada',
'apache',
'applescript',
'apt_sources',
'asm',
'asp',
'autoit',
'avisynth',
'bash',
'basic4gl',
'bf',
'bibtex',
'blitzbasic',
'bnf',
'boo',
'c',
'c_mac',
'caddcl',
'cadlisp',
'cfdg',
'cfm',
'cil',
'cmake',
'cobol',
'cpp-qt',
'cpp',
'csharp',
'css',
'd',
'dcs',
'delphi',
'diff',
'div',
'dos',
'dot',
'eiffel',
'email',
'erlang',
'fo',
'fortran',
'freebasic',
'genero',
'gettext',
'glsl',
'gml',
'gnuplot',
'groovy',
'haskell',
'hq9plus',
'html4strict',
'idl',
'ini',
'inno',
'intercal',
'io',
'java',
'java5',
'javascript',
'kixtart',
'klonec',
'klonecpp',
'latex',
'lisp',
'locobasic',
'lolcode',
'lotusformulas',
'lotusscript',
'lscript',
'lsl2',
'lua',
'm68k',
'make',
'matlab',
'mirc',
'modula3',
'mpasm',
'mxml',
'mysql',
'nsis',
'oberon2',
'objc',
'ocaml-brief',
'ocaml',
'oobas',
'oracle11',
'oracle8',
'pascal',
'per',
'perl',
'php-brief',
'php',
'pic16',
'pixelbender',
'plsql',
'povray',
'powershell',
'progress',
'prolog',
'properties',
'providex',
'python',
'qbasic',
'rails',
'rebol',
'reg',
'robots',
'ruby',
'sas',
'scala',
'scheme',
'scilab',
'sdlbasic',
'smalltalk',
'smarty',
'sql',
'tcl',
'teraterm',
'text',
'thinbasic',
'tsql',
'typoscript',
'vb',
'vbnet',
'verilog',
'vhdl',
'vim',
'visualfoxpro',
'visualprolog',
'whitespace',
'whois',
'winbatch',
'xml',
'xorg_conf',
'xpp',
'yaml',
'z80',
];
jQuery( '#jquery-ui-autocomplete-input' ) . autocomplete( {
source: computerLanguages
} );
} );
// -->
</script>
<!--
jQuery( function() {
var computerLanguages = [
'abap',
'actionscript',
'actionscript3',
'ada',
'apache',
'applescript',
'apt_sources',
'asm',
'asp',
'autoit',
'avisynth',
'bash',
'basic4gl',
'bf',
'bibtex',
'blitzbasic',
'bnf',
'boo',
'c',
'c_mac',
'caddcl',
'cadlisp',
'cfdg',
'cfm',
'cil',
'cmake',
'cobol',
'cpp-qt',
'cpp',
'csharp',
'css',
'd',
'dcs',
'delphi',
'diff',
'div',
'dos',
'dot',
'eiffel',
'email',
'erlang',
'fo',
'fortran',
'freebasic',
'genero',
'gettext',
'glsl',
'gml',
'gnuplot',
'groovy',
'haskell',
'hq9plus',
'html4strict',
'idl',
'ini',
'inno',
'intercal',
'io',
'java',
'java5',
'javascript',
'kixtart',
'klonec',
'klonecpp',
'latex',
'lisp',
'locobasic',
'lolcode',
'lotusformulas',
'lotusscript',
'lscript',
'lsl2',
'lua',
'm68k',
'make',
'matlab',
'mirc',
'modula3',
'mpasm',
'mxml',
'mysql',
'nsis',
'oberon2',
'objc',
'ocaml-brief',
'ocaml',
'oobas',
'oracle11',
'oracle8',
'pascal',
'per',
'perl',
'php-brief',
'php',
'pic16',
'pixelbender',
'plsql',
'povray',
'powershell',
'progress',
'prolog',
'properties',
'providex',
'python',
'qbasic',
'rails',
'rebol',
'reg',
'robots',
'ruby',
'sas',
'scala',
'scheme',
'scilab',
'sdlbasic',
'smalltalk',
'smarty',
'sql',
'tcl',
'teraterm',
'text',
'thinbasic',
'tsql',
'typoscript',
'vb',
'vbnet',
'verilog',
'vhdl',
'vim',
'visualfoxpro',
'visualprolog',
'whitespace',
'whois',
'winbatch',
'xml',
'xorg_conf',
'xpp',
'yaml',
'z80',
];
jQuery( '#jquery-ui-autocomplete-input' ) . autocomplete( {
source: computerLanguages
} );
} );
// -->
</script>
CSS
<style>
<!--
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
#jquery-ui-autocomplete label {
float: left;
margin-right: 0.5em;
color: black;
font-size: 15px;
}
-->
</style>
<!--
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 20px;
}
#jquery-ui-autocomplete label {
float: left;
margin-right: 0.5em;
color: black;
font-size: 15px;
}
-->
</style>
HTML
<div id="jquery-ui-autocomplete" class="ui-widget">
<label for="jquery-ui-autocomplete-label">入力欄: </label>
<input id="jquery-ui-autocomplete-input" />
</div>
<label for="jquery-ui-autocomplete-label">入力欄: </label>
<input id="jquery-ui-autocomplete-input" />
</div>