jquery.ajax-combobox
Version:
jQuery plugin to create a text box which can auto-complete and pull-down-select.
323 lines (312 loc) • 13.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Basic: 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 active" 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" 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>
Basic
</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="#sample01_01">
<span lang="en">Usage</span>
<span lang="ja">使い方</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample01_02">
<span lang="en">Amount to display at once</span>
<span lang="ja">一度に表示する数</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample01_04">
<span lang="en">Search multi fields</span>
<span lang="ja">複数のフィールドから検索</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample01_05">
<span lang="en">"OR" search</span>
<span lang="ja">OR検索へ切り替える</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample01_06">
<span lang="en">Sorting</span>
<span lang="ja">並べ替えの規則を決める</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample01_07">
<span lang="en">Language</span>
<span lang="ja">メッセージの言語</span>
</a>
<a class="list-group-item list-group-item-action" href="#sample01_03">
<span lang="en">Simple page navi</span>
<span lang="ja">ページナビをシンプルに</span>
</a>
</div>
</div>
</nav>
<article class="col-lg-8">
<section id="sample01_01" class="card">
<h5 class="card-header">
<span lang="en">Usage</span>
<span lang="ja">使い方</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="usage/" 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">
1st arg: File name to send data by Ajax<br>
2nd arg: Options
</p>
<p lang="ja">
第1引数にAjax送信先のファイル名を、<br>
第2引数にオプションを設定します。
</p>
<h6>HTML</h6>
<pre>
<link rel="stylesheet" href="jquery.ajax-combobox.css">
<input id="<span class="red">foo</span>" type="text">
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="jquery.ajax-combobox.min.js"></script>
</pre>
<h6>JavaScript</h6>
<pre>
$('<span class="red">#foo</span>').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">lang</span>: 'en', // Set language to English
<span class="green">db_table</span>: 'nation', // DB table to search
<span class="green">button_img</span>: 'btn.png', // Image for pull-down button
}
);
</pre>
</div>
</section>
<section id="sample01_02" class="card">
<h5 class="card-header">
<span lang="en">Amount to display at once</span>
<span lang="ja">一度に表示する数</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="amount-to-display-at-once/" 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">per_page</span>: 20, // Amount of list items
<span class="green">navi_num</span>: 10 // Amount of pages
}
);
</pre>
</div>
</section>
<section id="sample01_04" class="card">
<h5 class="card-header">
<span lang="en">Search multi fields</span>
<span lang="ja">複数のフィールドから検索</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="search-multi-fields/" 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 set options below, besides its name, you can search by id.</p>
<p lang="ja">下記のように指定することで、名前の他にIDでも検索できます。</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">search_field</span>: 'name, id'
}
);
</pre>
</div>
</section>
<section id="sample01_05" class="card">
<h5 class="card-header">
<span lang="en">"OR" search</span>
<span lang="ja">OR検索へ切り替える</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="or-search/" 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">
Default is "AND". You can change it to "OR".<br>
</p>
<p lang="ja">
デフォルトはAND検索ですがOR検索にすることもできます。<br>
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">and_or</span>: 'OR'
}
);
</pre>
</div>
</section>
<section id="sample01_06" class="card">
<h5 class="card-header">
<span lang="en">Sorting</span>
<span lang="ja">並べ替えの規則を決める</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="sorting/" 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">
Basically, list is ordered by <code>search_field</code> option.<br>
You can change it by <code>order_by</code> option.
</p>
<p lang="ja">
基本的には、"search_field"オプションに指定されたフィールドの昇順に並べ替えられます。<br>
"order_by"オプションで任意に指定することもできます。
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">order_by</span>: [
'name DESC', // ASC or DESC should be UPPERCASE.
'created'
]
}
);
</pre>
</div>
</section>
<section id="sample01_07" class="card">
<h5 class="card-header">
<span lang="en">Language</span>
<span lang="ja">メッセージの言語</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="language/" 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 <code>lang</code> option to choose language used in this plugin's UI.
</p>
<p lang="ja">
このプラグインのUIで使う言語を<code>lang</code>オプションで指定してください。
</p>
<table class="table">
<thead><tr><th>Option value</th><th>Language</th></tr></thead>
<tbody>
<tr><td>de</td><td>German<br>(Thanks Sebastian Gohres)</td></tr>
<tr><td>en (default)</td><td>English</td></tr>
<tr><td>es</td><td>Spanish<br>(Thanks Joaquin G. de la Zerda)</td></tr>
<tr><td>pt-br</td><td>Brazilian Portuguese<br>(Thanks Marcio de Souza)</td></tr>
<tr><td>ja</td><td>Japanese</td></tr>
</tbody>
</table>
</section>
<section id="sample01_03" class="card">
<h5 class="card-header">
<span lang="en">Simple page navi</span>
<span lang="ja">ページナビをシンプルに</span>
</h5>
<div class="card-body">
<div class="btn-container">
<a class="btn btn-primary" href="simple-page-navi/" 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 <code>navi_simple</code> when you want to narrow the width of the ComboBox as much as possible.<br>
Shortcut key is still enable. (<kbd>Shift+Left/Right</kbd>)
</p>
<p lang="ja">
ComboBoxの幅をできるだけ狭くしたい場合は、<code>navi_simple</code>オプションで先頭・末尾のページへのリンクを非表示にできます。<br>
なお、キーボードのショートカットは有効のままです。(<kbd>Shift+右/左</kbd>)
</p>
<pre>
$('#foo').ajaxComboBox(
'jquery.ajax-combobox.php',
{
<span class="green">navi_simple</span>: true
}
);
</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>