sutara79 / jquery.ajax-combobox Goto Github PK

View Code? Open in Web Editor NEW

80.0 20.0 31.0 1.45 MB

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

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

HTML 4.94% JavaScript 94.55% PHP 0.51%

jquery-plugin combobox

jquery.ajax-combobox's Introduction

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

Forked

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

License

MIT

Author

Yuusaku Miyazaki ( [email protected] )

jquery.ajax-combobox's People

Contributors

Stargazers

Watchers

jquery.ajax-combobox's Issues

Destroy method

Just played with this plugin and works very well in my app.
Question, is there a method to destroy or reset the ajax combo in JS ?
Basically I want to call the constructor again with different args, but doing this, the UI breaks (creating a wrapper over a wrapper, and so)
If not I can add a destroy method and send a pull request.
Thanks

Deprecated: setting "src" attribute for "button_img" option.

Setting src attribute for button_img option will be removed next major version v8.0.0.
button_img only accept HTML element.
This feature was added at v7.5.0.
See how to use.

全角半角を区別しない検索をするには

ユーザがコンボボックスに入力した文字が全角であろうと半角であろうと、検索結果が同じになるようにすにはどうすればいいのかを考えてみました。

最善の策 (MySQLのみ)

対象カラムの照合順序をutf8_unicode_ciにするだけで解決します。

参照: 【MySQL】大文字小文字、全角半角区別しないでマッチする検索をしたい at softelメモ

次善の策

プラグインに新しいオプション"mb_convert_kana"を設けて対応します。
オプションの値をサーバ側のPHPへ渡して、そのまま"mb_convert_kana()"の引数とします。
この方法の問題点は以下のとおりです。

あらかじめ、DB内の全角・半角を揃える必要がある。
PHP以外の言語には対応していない。

どの方法を取るか、しばらく検討してみます。

Page scrolls to 'top', when click on 'change page of result'

When I click 'next'/'page number,' it scrolls page to top. It's because of:
<a href="#"
Plugin should use everywhere:
<a href="javascript:void(0)"
More information:
http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0

Tested in Google Chrome 45.

请问这个控件支持默认值么？

在$('#id').ajaxCombobox()之后我希望在$('#id')上边设置value的值但是每次设置上之后都被异步的效果冲掉了，当ajaxCombobox这个函数加载完控件之后是不是把原来的值给清空了如果支持的话请指明一下属性如果不支持也请回复下我改成Promise 谢谢

大幅に作り直したい

現状の問題点

1. 拡張性に難がある

DBから得たデータをユーザが自由に操作できない。
現状では、決められた形にそってプラグインが表示するだけである。
bxSliderのように、パブリックメソッドを充実させたい。

2. 機能が多すぎる

思いつくままに機能を追加していたら、ソースコードが肥大してしまった。
コンボボックスの機能だけに絞りたい。

3. 外観が古くさい

外観を表現するCSSの記述も古くなっている。
簡潔なHTML構造にして、ユーザが外観を自由に変更できるようにしたい。

以上の3点が特に気になっている点です。
しかし、今は忙しくて体力と時間がない…。

Set Value

in combobox data like "Adam", "Alan", "Jose" ...etc field [name]
control field & primary key is [id]
in interactivity on form must to change over ID
How do that ????
$("#selectName").val(1) dont work.

Search whitespaces

For the single mode, I want to send a single text field containing the original string: without splitting by whitespace. Is it possible using the constructor args ?

Scroll paging ?

Your plugin is awesome, but what about scroll pagination ? When we scroll results pages changing ?

Populate combobox data from local function

I have a need to have the local JavaScript on the page generate the combobox data instead of fetching via AJAX and not a static array. It would be helpful for my situation to be able to pass in a function instead of an array or URL and have the combobox fetch from that function each time it is about to show the list. It wouldn't need to run on every keypress (for me, anyway), just before the list is to be shown.

I'm trying out my idea to see if it would work out for me. If so, I'll send a pull request to see if it seems like a good tactic to take, or to get a better suggestion.

Combox is moving under tags beside

When placing tags beside your combox (I was using your index.html file in sample)

This tag (or anything else ) will move combobox under the tag.

Is it possible to have them in the same line. Or I'm missing some syntax or some knowledge of html/css .

Anyway great work.

Dejan