jquery.ajax-combobox
Version:
jQuery plugin to create a text box which can auto-complete and pull-down-select.
412 lines (397 loc) • 18.7 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Others: jquery.ajax-combobox</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="sample.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="../">
<svg class="octicon octicon-home" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M16 9l-3-3V2h-2v2L8 1 0 9h2l1 5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1l1-5h2zm-4 5H9v-4H7v4H4L2.81 7.69 8 2.5l5.19 5.19L12 14z"></path></svg>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="basic.html">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sub-info.html">Sub info</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="others.html">Others</a>
</li>
<li class="nav-item">
<a class="nav-link" href="text-area.html">Text area</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="page-title">
<small class="h5">jquery.ajax-combobox</small><br>
Others
</h1>
</div>
</header>
<div class="container">
<div class="row main">
<nav class="col-lg-4 mb-3 toc">
<div id="js-menu-follow">
<div class="btn-group">
<button id="lang-en" class="btn btn-primary js-btn-lang" type="button" data-lang="en">English</button>
<button id="lang-ja" class="btn btn-primary js-btn-lang" type="button" data-lang="ja">日本語</button>
</div>
<h5 class="mt-2">
<span lang="en">Index</span>
<span lang="ja">目次</span>
</h5>
<div class="list-group">
<a class="list-group-item list-group-item-action" href="#sample03_01">
<span lang="en">Select only: Basic</span>
<span lang="ja">セレクト専用の基本</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample03_02">
<span lang="en">Select only: Primary key</span>
<span lang="ja">送信する値のカラムを変更</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample06_01">
<span lang="en">After select: Basic</span>
<span lang="ja">イベント発火の方法</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample06_02">
<span lang="en">After select: "is_enter_key"</span>
<span lang="ja">Enterキー押下を検知する方法</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample04_01">
<span lang="en">Initial value</span>
<span lang="ja">初期値設定</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample05_01">
<span lang="en">JS object instead of DB</span>
<span lang="ja">DBの代わりにJSオブジェクトを検索する</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample07_01">
<span lang="en">Simple text box</span>
<span lang="ja">ボタンのないシンプルなテキストボックス</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample07_02">
<span lang="en">Get instance</span>
<span lang="ja">プラグインのオブジェクトを受け取る</span>
</a>
<a class="list-group-item list-group-item-action" href="#button-image">
<span lang="en">Button image</span>
<span lang="ja">ボタンの画像</span>
</a>
</div>
</div>
</nav>
<article class="col-lg-8">
<section id="sample03_01" class="card">
<h5 class="card-header">
<span lang="en">Select only: Basic</span>
<span lang="ja">セレクト専用の基本</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="select-only-basic/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">
You can search by free word, but must set the value only from the list.
</p>
<p lang="ja">
自由な文章で検索できますが、リストの中から選ばなければ警告が表示されます。
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">select_only</span>: true
}
);
</pre>
<p lang="en">
If this option is set, the value of <code>primary_key</code> field transmit by the form.
</p>
<p lang="ja">
なお、このオプションを設定すると、フォームで送信されるのは"primary_key"オプションで設定したカラムの値になります。<br>
この値は、候補リストの<li>要素のpkey属性にもなります。<br>
テキストボックスと同じname属性を持つ隠しフィールド(hidden)を生成し、リストから選択した場合のみ、"primary_key"の値をhiddenのvalue属性に設定しています。
</p>
<pre>
<span class="gray">// Text box</span>
<input id="foo" name="<span class="green">foo</span>" type="text" />
<span class="gray">// List</span>
...
<li pkey="<span class="red">A010</span>" class="">Adams</li>
<li pkey="<span class="red">A009</span>" class="ac_over">Adams</li>
<li pkey="<span class="red">A005</span>" class="">Adams</li>
...
<span class="gray">// Hidden field</span>
<input type="hidden" name="<span class="green">foo</span>" value="<strong class="red">A011</strong>"/>
</pre>
</div>
</section>
<section id="sample03_02" class="card">
<h5 class="card-header">
<span lang="en">Select only: Primary key</span>
<span lang="ja">送信する値のカラムを変更</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="select-only-primary-key/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">primary_key</span>: 'name' // Default: <strong>'id'</strong>
}
);
</pre>
</div>
</section>
<section id="sample06_01" class="card">
<h5 class="card-header">
<span lang="en">After select: Basic</span>
<span lang="ja">イベント発火の方法</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="after-select-basic/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">bind_to</span>: <span class="red">'foo'</span>
}
)
.bind(<span class="red">'foo'</span>, function() {
$('#result').text($(this).val() + ' is selected.');
});
</pre>
</div>
</section>
<section id="sample06_02" class="card">
<h5 class="card-header">
<span lang="en">After select: "is_enter_key"</span>
<span lang="ja">Enterキー押下を検知する方法</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="after-select-is-enter-key/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">
If text box is not enclosed by form tag and event handler is set<br>
for inputting enter key, when one of the list is selected by enter key<br>
function is doubly executed.<br>
To avoid this situation, a argument that become true when selected by<br>
enter key is set When originality event of plugin is fired.
</p>
<p lang="ja">
テキストボックスをフォームタグで囲まず、Enterキーが押された場合の<br>
イベントハンドラを独自に用意している場合、候補をEnterキーで選ぶと<br>
イベントが重複して実行されてしまいます。<br>
それを防ぐため、プラグインの独自イベントが発火する際に、<br>
Enterキーで候補が選ばれた場合はtrueとなる引数を追加しました。
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
bind_to: 'foo'
}
)
.bind('foo', function(e, <span class="green">is_enter_key</span>) {
if (!<span class="green">is_enter_key</span>) {
$('#result').text($(this).val() + ' is selected. (by mouse)');
}
})
.keydown(function(e) {
if(e.keyCode == 13) {
$('#result').text($(this).val() + ' is selected. (by enter key)');
}
});
</pre>
</div>
</section>
<section id="sample04_01" class="card">
<h5 class="card-header">
<span lang="en">Initial value</span>
<span lang="ja">初期値設定</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="initial-value/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">As initial value, set the value of <code>primary_key</code> option.</p>
<p lang="ja"><code>primary_key</code>オプションの値を初期値として指定できます。</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">init_record</span>: 10
}
);
</pre>
</div>
</section>
<section id="sample05_01" class="card">
<h5 class="card-header">
<span lang="en">JS object instead of DB</span>
<span lang="ja">DBの代わりにJSオブジェクトを検索する</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="js-object/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">Set JS object instead of the name of server-side file to 1st argument.</p>
<p lang="ja">Ajax通信するサーバサイドのファイル名の代わりに、JSオブジェクトを第1引数に指定します。</p>
<pre>
var <span class="green">data</span> = [
{id:'A001',name:'Adams', post:'Sales', position:'The rank and file'},
{id:'A002',name:'Darling', post:'Sales', position:'The rank and file'},
{id:'A003',name:'Kingston', post:'General Affairs',position:'Chief clerk'},
...
];
$('#foo').ajaxComboBox(<span class="green">data</span>, {});
</pre>
</div>
</section>
<section id="sample07_01" class="card">
<h5 class="card-header">
<span lang="en">Simple text box</span>
<span lang="ja">ボタンのないシンプルなテキストボックス</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="simple-text-box/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">Remove pull-down button from text box, but functionality is same as default.</p>
<p lang="ja">プルダウンボタンが非表示なっている以外は、通常のコンボボックスと何ら変わりありません。</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">plugin_type</span>: <strong>'simple'</strong>
}
);
</pre>
</div>
</section>
<section id="sample07_02" class="card">
<h5 class="card-header">
<span lang="en">Get instance</span>
<span lang="ja">プラグインのオブジェクトを受け取る</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="get-instance/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">
You can get an instance of this plugin, and control after apply.<br>
NOTE: Method chaining will be destroyed.
</p>
<p lang="ja">
プラグインのインスタンスを受け取ることで、プラグイン適用後に設定を変更することができます。<br>
その代わり、メソッドチェーンは無効になります。
</p>
<pre>
var $instance = $('#foo').ajaxComboBox(
<span class="red">'-----'</span>,
{
db_table: <span class="red">'-----'</span>,
<span class="green">instance</span>: true
}
);
$instance.each(function() {
this.option.source = <span class="red">'jquery.ajax-combobox.php'</span>;
this.option.db_table = <span class="red">'nation'</span>;
});
</pre>
</div>
</section>
<section id="button-image" class="card">
<h5 class="card-header">
<span lang="en">Button image</span>
<span lang="ja">ボタンの画像</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="button-image/" target="_blank">
Sample
<svg class="octicon octicon-link-external" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>
</a>
</div>
<p lang="en">
You can set <code>button_img</code> option to change image of button.<br>
<code>button_img</code> accepts <code>src</code> attribute of <code><img></code> or HTML element such as <code><img></code>, <code><svg></code>.<br>
Default value is <a href="https://octicons.github.com/icon/chevron-down/">Octicons</a>.
</p>
<p lang="ja">
<code>button_img</code>オプションでボタンの画像を変更できます。<br>
<code>button_img</code>には<code><img></code>の<code>src</code>属性、または<code><img></code>や<code><svg></code>などのHTML要素を指定できます。
デフォルトは<a href="https://octicons.github.com/icon/chevron-down/">Octicons</a>のSVG画像です。
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
// Default (SVG)
<span class="green">button_img</span>: '<svg class="octicon octicon-chevron-down" viewBox="0 0 10 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z"></path></svg>',
// Image
button_img: '<img src="btn.png">',
// src attribute of <img>
button_img: 'btn.png',
}
);
</pre>
</article>
</div><!-- .row -->
</div><!-- .container -->
<footer>
<div class="container">
powered by <a href="http://www.usamimi.info/new/index.html">usamimi.info</a>, <a href="https://getbootstrap.com/">Bootstrap</a>
</div>
</footer>
<!-- JavaScript -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.simple-scroll-follow@3.1.2/dist/jquery.simple-scroll-follow.min.js"></script>
<script src="sample.js"></script>
</body>
</html>