スクロールバーを出現させるオートコンプリート

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>
個別に読み込む場合
<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>

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>

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>

HTML

<div id="jquery-ui-autocomplete" class="ui-widget">
    <label for="jquery-ui-autocomplete-label">入力欄: </label>
    <input id="jquery-ui-autocomplete-input" />
</div>

スポンサード リンク

カテゴリー: Autocomplete, JavaScript, jQuery, jQuery UI, フォーム パーマリンク