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 ( [email protected] )