jquery.ajax-combobox
Version:
jQuery plugin to create a text box which can auto-complete and pull-down-select.
279 lines (271 loc) • 11.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Sub info: 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 active" href="sub-info.html">Sub info</a>
</li>
<li class="nav-item">
<a class="nav-link" 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>
Sub info
</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="#sample02_01">
<span lang="en">Basic</span>
<span lang="ja">サブ情報の基本</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample02_02">
<span lang="en">Change the title</span>
<span lang="ja">表の項目名を変更する</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample02_03">
<span lang="en">Visible field</span>
<span lang="ja">サブ情報の表示カラムの設定</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample02_04">
<span lang="en">Hidden field</span>
<span lang="ja">サブ情報の非表示カラムの設定</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample02_05">
<span lang="en">Simple</span>
<span lang="ja">サブ情報の項目名を非表示にする</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample02_06">
<span lang="en">Divert</span>
<span lang="ja">サブ情報を他で利用する</span>
</a>
</div>
</div>
</nav>
<article class="col-lg-8">
<section id="sample02_01" class="card">
<h5 class="card-header">
<span lang="en">Basic</span>
<span lang="ja">サブ情報の基本</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sub-info-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">
Even though duplicate names exist, you can identify it by sub name.
</p>
<p lang="ja">
名前が重複していてもサブ情報で区別できます。
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">sub_info</span>: true
}
);
</pre>
</div>
</section>
<section id="sample02_02" class="card">
<h5 class="card-header">
<span lang="en">Change the title</span>
<span lang="ja">表の項目名を変更する</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sub-info-change-title/" 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">
<code>sub_as</code> option can change the title.
</p>
<p lang="ja">
何も設定しないと、サブ情報の表の項目名はデータベースのカラム名が表示されてしまいます。<br>
<code>sub_as</code>オプションで表示名を変更できます。
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
sub_info: true,
<span class="green">sub_as</span>: {
<span class="green">id</span>: 'Employer ID',
<span class="green">post</span>: 'Post',
<span class="green">position</span>: 'Position'
}
}
);
</pre>
</div>
</section>
<section id="sample02_03" class="card">
<h5 class="card-header">
<span lang="en">Visible field</span>
<span lang="ja">サブ情報の表示カラムの設定</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sub-info-visible-field/" 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 specify visible fields by <code>show_field</code> option which accepts comma separated text.</p>
<p lang="ja">カンマ区切りもできる<code>show_field</code>オプションで表示フィールドを指定できます。</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
sub_info: true,
sub_as: {
post: 'Post',
position: 'Position'
},
<span class="green">show_field</span>: 'position, post'
}
);
</code>
</div>
</section>
<section id="sample02_04" class="card">
<h5 class="card-header">
<span lang="en">Hidden field</span>
<span lang="ja">サブ情報の非表示カラムの設定</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sub-info-hidden-field/" 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 specify hidden fields by <code>hide_field</code> option which accepts comma separated text.</p>
<p lang="ja">カンマ区切りもできる<code>hide_field</code>オプションで非表示フィールドを指定できます。</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
sub_info: true,
sub_as: {
post: 'Post',
position: 'Position'
},
<span class="green">hide_field</span>: 'position, post'
}
);
</pre>
</div>
</section>
<section id="sample02_05" class="card">
<h5 class="card-header">
<span lang="en">Simple</span>
<span lang="ja">サブ情報の項目名を非表示にする</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sub-info-simple/" 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 hide field column by setting <code>'simple'</code> to <code>sub_info</code> option instead of <code>true</code>.</p>
<p lang="ja"><code>sub_info</code>オプションに<code>true</code>の代わりに<code>'simple'</code>と指定することでサブ情報の項目名を非表示にできます。</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">sub_info</span>: <strong class="red">'simple'</strong>,
show_field: 'post'
}
);
</pre>
</div>
</section>
<section id="sample02_06" class="card">
<h5 class="card-header">
<span lang="en">Divert</span>
<span lang="ja">サブ情報を他で利用する</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sub-info-divert/" 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">
When you select from list, the custom attribute <code>sub_info</code> which contains sub info as JSON is added to the text box <br>
Then you can use Sub-info for other purpose.
</p>
<p lang="ja">
候補を選択した際、テキストボックスの<code>sub_info</code>という独自の属性にJSON形式でサブ情報が格納されるので、他で利用することが可能です。
</p>
<pre>
$('#foo').ajaxComboBox();
var <strong>json</strong> = $('#foo').attr('<span class="green">sub_info</span>');
</pre>
</div>
</section>
</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>