jquery.ajax-combobox

jQuery plugin to create a text box which can auto-complete and pull-down-select.

Demo

https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/

Install

• GitHub: Clone or download. Only you need is dist/.
• npm: npm i jquery.ajax-combobox
• CDN (jsDelivr):
  • jquery.ajax-combobox.min.js (v7.5.2)
  • jquery.ajax-combobox.min.css (v7.5.2)
  • In addition to above, dist/php/*.php is REQUIRED.

Usage

HTML

<link rel="stylesheet" href="jquery.ajax-combobox.css">

<input type="text" id="foo">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.ajax-combobox.min.js"></script>

JavaScript

$('#foo').ajaxComboBox('jquery.ajax-combobox.php');

Note

Database

Change the value to connect DB in dist/php/jquery.ajax-combobox.php

<?php
//++++++++++++++++++++++++++++++++++++++++++++++++++++
//#### You MUST change this value. ####
$mysql = array(
  'dsn'      => 'mysql:host=localhost;dbname=acbox;charset=utf8',
  'username' => 'root',
  'password' => ''
);
$sqlite = array(
  'dsn'      => 'sqlite:../sample/sample.sqlite3',
  'username' => '',
  'password' => ''
);
new AjaxComboBox($sqlite);
//++++++++++++++++++++++++++++++++++++++++++++++++++++
?>

Options

• 1st arg (string|Object): Server side file such as PHP. Or an object of data
• 2nd arg (Object): Options

Combobox

Option	Type	Initial	Explain
lang	string	'en'	Language for this plugin's UI (en, es, pt-br and ja)
db_table	string	'tbl'	Table of database to query
field	string	'name'	Field of table to display on result
search_field	string	=field	Field of table to search. Accept comma separated string. (e.g.: 'id, name, job')
order_by	mixed	=search_field	Field for sorting (e.g. 'name DESC', ['name ASC', 'age DESC']). ASC or DESC should be UPPERCASE.
and_or	string	'AND'	Boolean searching ('AND', 'OR')
per_page	number	10	Amount of items per page
navi_num	number	5	Amount of page-link on navi
navi_simple	boolean	false	Enable simple navi to narrow as possible
plugin_type	string	'combobox'	Choose 'combobox', 'simple', 'textarea'
bind_to	string	null	Event to run after selecting
button_img	string	Octicons	Image for "Get All" button. Accept HTML element, src attribute

Sub-info

Option	Type	Initial	Explain
sub_info	mixed	false	Display sub-info (true, false, 'simple')
sub_as	Object	{}	Alias for fields of sub-info
show_field	string	null	Field to display on sub-info. Accept comma separated. ('id, job, age')
hide_field	string	null	Field to hide on sub-info. Accept comma separated. ('id, job, age')

Select-only

Option	Type	Initial	Explain
select_only	boolean	false	Force only selecting
primary_key	string	'id'	Primary-key to use "select only" mode
init_record	number	null	Value of primary-key for initial value
instance	boolean	false	Return instance instead of jQuery object

Textarea

Option	Type	Initial	Explain
tags	Array	null	Options for searching tags
tags.pattern	Array	null	A pair of start symbol and end symbol to surround a tag
tags.space	Array	[true, true]	Insert space automatically ahead start symbol and behind end symbol
tags.db_table	string	=db_table
tags.field	string	=field
tags.search_field	string	=search_field
tags.order_by	mixed	=order_by
tags.sub_info	mixed	=sub_info
tags.sub_as	Object	=sub_as
tags.show_field	string	=show_field
tags.hide_field	string	=hide_field

Shorten URL

Option	Type	Initial	Explain
shorten_btn	string	null	CSS selector of the button to shoten url
shorten_src	string	'dist/bitly.php'	Path to the script to shorten url
shorten_min	number	20	Minimum characters to run shortening url
shorten_reg	Object	null	RegExp object to detect url in the textarea

Extensions

• addComboBox
• ajaxComboBox_for_CakePHP

Forked

• jquery.suggest 1.1 (Peter Vulgaris)
• jquery.caretpos.js 0.1 (tubureteru)

License

MIT

Author

Yuusaku Miyazaki ( toumin.m7@gmail.com )