jQuery plugin to create a text box which can auto-complete and pull-down-select.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

jquery.ajax-combobox

npm version Build Status

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

image

Demo

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

Install

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

Forked

License

MIT

Author

Yuusaku Miyazaki ( toumin.m7@gmail.com )