├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── README.md ├── composer.json ├── composer.lock ├── dist ├── css │ ├── jquery.ajax-combobox.css │ └── jquery.ajax-combobox.min.css ├── js │ └── jquery.ajax-combobox.min.js └── php │ ├── AjaxComboBox.php │ ├── bitly.php │ └── jquery.ajax-combobox.php ├── index.html ├── node_modules ├── jquery │ └── dist │ │ └── jquery.min.js ├── mocha │ ├── mocha.css │ └── mocha.js └── power-assert │ └── build │ └── power-assert.js ├── package.json ├── phpunit.xml ├── sample ├── after-select-basic │ ├── index.html │ └── send.php ├── after-select-is-enter-key │ ├── index.html │ └── send.php ├── amount-to-display-at-once │ ├── index.html │ └── send.php ├── basic.html ├── button-image │ ├── btn.png │ ├── index.html │ └── send.php ├── disable │ ├── index.html │ └── send.php ├── get-instance │ ├── index.html │ └── send.php ├── img │ ├── 001.png │ ├── 002.png │ ├── 003.png │ └── readme.png ├── initial-value │ ├── index.html │ └── send.php ├── instance │ └── index.html ├── js-object │ ├── index.html │ └── send.php ├── language │ ├── index.html │ └── send.php ├── or-search │ ├── index.html │ └── send.php ├── others.html ├── sample.css ├── sample.js ├── sample.sqlite3 ├── sample_mysql.sql ├── search-multi-fields │ ├── index.html │ └── send.php ├── select-only-basic │ ├── index.html │ └── send.php ├── select-only-primary-key │ ├── index.html │ └── send.php ├── shorten-url │ └── index.html ├── simple-page-navi │ ├── index.html │ └── send.php ├── simple-text-box │ ├── index.html │ └── send.php ├── sorting │ ├── index.html │ └── send.php ├── sub-info-basic │ ├── index.html │ └── send.php ├── sub-info-change-title │ ├── index.html │ └── send.php ├── sub-info-divert │ ├── index.html │ └── send.php ├── sub-info-hidden-field │ ├── index.html │ └── send.php ├── sub-info-simple │ ├── index.html │ └── send.php ├── sub-info-visible-field │ ├── index.html │ └── send.php ├── sub-info.html ├── text-area-basic │ └── index.html ├── text-area-complex │ └── index.html ├── text-area-js-object │ └── index.html ├── text-area-multi-tag-pattern │ └── index.html ├── text-area-no-space │ └── index.html ├── text-area-options │ └── index.html ├── text-area.html └── usage │ ├── index.html │ └── send.php ├── src ├── ajaxCombobox.js ├── fn_ajaxCombobox.js ├── index.js └── method │ ├── 03-_setOption.js │ ├── 04-_setMessage.js │ ├── 05-_setCssClass.js │ ├── 06-_setElem.js │ ├── 07-_setInitRecord.js │ ├── 08-_ehButton.js │ ├── 10-_getShortURL.js │ ├── 12-_scrollWindow.js │ ├── 14-_setTimerCheckValue.js │ ├── 16-_processKey.js │ ├── 18-_suggest.js │ ├── 20-_searchForDb.js │ ├── 22-_searchForJson.js │ ├── 24-_sortAsc.js │ ├── 26-_prepareResults.js │ ├── 28-_displayResults.js │ ├── 30-_firstPage.js │ ├── 32-_selectCurrentLine.js │ └── 34-_nextLine.js ├── test ├── js │ ├── config.js │ ├── e2e │ │ ├── select-only-basic.js │ │ └── shorten-url.js │ ├── lib │ │ ├── e2e.js │ │ ├── server.js │ │ └── unit.js │ ├── test.js │ └── unit │ │ ├── index.html │ │ ├── jQuery.ajaxComboBox │ │ ├── setOption.js │ │ ├── setOrderbyOption.js │ │ └── strToArray.js │ │ └── jQuery.fn │ │ └── ajaxComboBox.js └── php │ └── AjaxComboBoxTest.php └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # OS 2 | .AppleDouble/ 3 | *.DS_Store 4 | Thumbs.db 5 | 6 | # Package manager 7 | vendor/ 8 | temp/ 9 | 10 | # Doc & log 11 | out/ 12 | phpdoc/ 13 | coverage/ 14 | npm-debug.log 15 | 16 | # webpack 17 | *.map 18 | 19 | # npm 20 | node_modules/* 21 | package-lock.json 22 | 23 | # Mocha 24 | !node_modules/mocha/ 25 | node_modules/mocha/* 26 | !node_modules/mocha/mocha.css 27 | !node_modules/mocha/mocha.js 28 | 29 | # power-assert 30 | !node_modules/power-assert/ 31 | node_modules/power-assert/* 32 | !node_modules/power-assert/build/ 33 | node_modules/power-assert/build/* 34 | !node_modules/power-assert/build/power-assert.js 35 | 36 | # jQuery 37 | !node_modules/jquery/ 38 | node_modules/jquery/* 39 | !node_modules/jquery/dist/ 40 | node_modules/jquery/dist/* 41 | !node_modules/jquery/dist/jquery.min.js -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: php 2 | 3 | php: 4 | - 7.1 5 | 6 | install: 7 | - travis_retry composer install --no-interaction --prefer-dist --no-suggest 8 | - nvm install 10 9 | - nvm use 10 10 | - npm install 11 | - npm install codecov 12 | 13 | # Test and get code coverage 14 | script: 15 | - ./vendor/bin/phpunit --coverage-clover clover.xml 16 | - npm test 17 | 18 | # Submit coverage report to Codecov 19 | after_success: 20 | - bash <(curl -s https://codecov.io/bash) -cF php 21 | - ./node_modules/bin/codecov 22 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG: jquery.ajax-combobox 2 | 3 | ## v7.5.3 4 | #### Deprecated 5 | - Lowercase "asc" or "desc" in `order_by` are **deprecated**. 6 | (e.g. `order_by: ['field1 asc', 'field2 desc']`) 7 | In the future, lowercase "asc" or "desc" are judged to be field names. 8 | 9 | ## v7.5.0 10 | - Extend `button_img` option to accept HTML element such as `` or ``. 11 | See [Document](http://www.usamimi.info/~sutara/ajax-combobox/sample/others.html#button-image). 12 | - Change default value of `button_img` to [Octicons](https://octicons.github.com/icon/chevron-down/). 13 | 14 | ## v7.4.5 15 | - Not to scroll to top when click page navi. fix [Issue #9](https://github.com/sutara79/jquery.ajax-combobox/issues/9). 16 | - Make sure to display the sub info. 17 | - Change default value of `lang` option to `en` (English). 18 | - Move plugin files to each directory. 19 | - `dist/*.js` => `dist/js/*.js` 20 | - `dist/*.css` => `dist/css/*.css` 21 | - `dist/*.php` => `dist/php/*.php` 22 | - Improve demo page. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquery.ajax-combobox 2 | 3 | [![npm version](https://img.shields.io/npm/v/jquery.ajax-combobox.svg)](https://www.npmjs.com/package/jquery.ajax-combobox) 4 | [![Build Status](https://travis-ci.org/sutara79/jquery.ajax-combobox.svg?branch=master)](https://travis-ci.org/sutara79/jquery.ajax-combobox) 5 | 6 | jQuery plugin to create a text box which can auto-complete and pull-down-select. 7 | 8 | ![image](sample/img/readme.png) 9 | 10 | ## Demo 11 | https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/ 12 | 13 | 14 | ## Install 15 | - [GitHub](https://github.com/sutara79/jquery.ajax-combobox): Clone or download. Only you need is `dist/`. 16 | - [npm](https://www.npmjs.com/package/jquery.ajax-combobox): `npm i jquery.ajax-combobox` 17 | - CDN ([jsDelivr](https://www.jsdelivr.com/)): 18 | - [jquery.ajax-combobox.min.js (v7.5.2)](https://cdn.jsdelivr.net/npm/jquery.ajax-combobox@7.5.2/dist/js/jquery.ajax-combobox.min.js) 19 | - [jquery.ajax-combobox.min.css (v7.5.2)](https://cdn.jsdelivr.net/npm/jquery.ajax-combobox@7.5.2/dist/css/jquery.ajax-combobox.min.css) 20 | - In addition to above, [dist/php/\*.php](https://github.com/sutara79/jquery.ajax-combobox/tree/master/dist/php) is REQUIRED. 21 | 22 | 23 | ## Usage 24 | ###### HTML 25 | ``` html 26 | 27 | 28 |
`ASC` or `DESC` should be UPPERCASE.| 74 | |[and_or](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/basic.html#sample01_05)|string|'AND'|Boolean searching ('AND', 'OR')| 75 | |[per_page](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/basic.html#sample01_02)|number|10|Amount of items per page| 76 | |[navi_num](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/basic.html#sample01_02)|number|5|Amount of page-link on navi| 77 | |[navi_simple](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/basic.html#sample01_03)|boolean|false|Enable simple navi to narrow as possible| 78 | |plugin_type|string|'combobox'|Choose 'combobox', ['simple'](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#sample07_01), ['textarea'](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_01)| 79 | |[bind_to](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#sample06_01)|string|null|Event to run after selecting| 80 | |[button_img](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#button-image)|string|[Octicons](https://octicons.github.com/icon/chevron-down/)|Image for "Get All" button. Accept HTML element, src attribute| 81 | 82 | ##### Sub-info 83 | |Option|Type|Initial|Explain| 84 | |:--|:--|:--|:--| 85 | |[sub_info](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/sub-info.html#sample02_01)|mixed|false|Display sub-info (true, false, 'simple')| 86 | |[sub_as](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/sub-info.html#sample02_02)|Object|{}|Alias for fields of sub-info| 87 | |[show_field](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/sub-info.html#sample02_03)|string|null|Field to display on sub-info. Accept comma separated. ('id, job, age')| 88 | |[hide_field](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/sub-info.html#sample02_04)|string|null|Field to hide on sub-info. Accept comma separated. ('id, job, age')| 89 | 90 | ##### Select-only 91 | |Option|Type|Initial|Explain| 92 | |:--|:--|:--|:--| 93 | |[select_only](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#sample03_01)|boolean|false|Force only selecting| 94 | |[primary_key](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#sample03_02)|string|'id'|Primary-key to use "select only" mode| 95 | |[init_record](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#sample04_01)|number|null|Value of primary-key for initial value| 96 | |[instance](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/others.html#sample07_02)|boolean|false|Return instance instead of jQuery object| 97 | 98 | ##### Textarea 99 | |Option|Type|Initial|Explain| 100 | |:--|:--|:--|:--| 101 | |[tags](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_01)|Array|null|Options for searching tags| 102 | |[tags.pattern](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_01)|Array|null|A pair of start symbol and end symbol to surround a tag| 103 | |[tags.space](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_02)|Array|[true, true]|Insert space automatically ahead start symbol and behind end symbol| 104 | |[tags.db_table](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|string|=db_table|| 105 | |[tags.field](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|string|=field|| 106 | |[tags.search_field](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|string|=search_field|| 107 | |[tags.order_by](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|mixed|=order_by|| 108 | |[tags.sub_info](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|mixed|=sub_info|| 109 | |[tags.sub_as](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|Object|=sub_as|| 110 | |[tags.show_field](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|string|=show_field|| 111 | |[tags.hide_field](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_05)|string|=hide_field|| 112 | 113 | ##### Shorten URL 114 | |Option|Type|Initial|Explain| 115 | |:--|:--|:--|:--| 116 | |[shorten_btn](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_06)|string|null|CSS selector of the button to shoten url| 117 | |[shorten_src](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_06)|string|'dist/bitly.php'|Path to the script to shorten url| 118 | |[shorten_min](https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/sample/text-area.html#sample08_06)|number|20|Minimum characters to run shortening url| 119 | |shorten_reg|Object|null|[RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) object to detect url in the textarea| 120 | 121 | 122 | ## Extensions 123 | - [addComboBox](http://www.usamimi.info/~sutara/sample/addComboBox/) 124 | - [ajaxComboBox_for_CakePHP](https://github.com/sutara79/ajaxComboBox_for_CakePHP) 125 | 126 | 127 | ## Forked 128 | - [jquery.suggest 1.1](http://www.vulgarisoverip.com/2007/08/06/jquerysuggest-11/) (Peter Vulgaris) 129 | - [jquery.caretpos.js 0.1](http://d.hatena.ne.jp/tubureteru/20110101/) (tubureteru) 130 | 131 | 132 | ## License 133 | [MIT](http://www.opensource.org/licenses/mit-license.php) 134 | 135 | 136 | ## Author 137 | [Yuusaku Miyazaki](http://d.hatena.ne.jp/sutara_lumpur/20090124/1232781879) 138 | ( ) 139 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "autoload": { 3 | "psr-4": { 4 | "myapp\\": "dist/php/" 5 | } 6 | }, 7 | "require-dev": { 8 | "phpunit/phpunit": "^6.1" 9 | }, 10 | "scripts": { 11 | "test": "phpunit", 12 | "cover": "phpunit --coverage-html coverage/php" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /dist/css/jquery.ajax-combobox.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /** 4 | * Container 5 | */ 6 | .ac_container { 7 | border: none; 8 | margin: 0; 9 | padding: 0; 10 | display: inline-block; 11 | vertical-align: text-bottom; 12 | position: relative; 13 | } 14 | 15 | .ac_input { 16 | background-color: white; 17 | border-right: none; 18 | border: 1px solid #888; 19 | vertical-align: text-bottom; 20 | display: inline-block; 21 | font-size: 16px; 22 | margin: 0; 23 | padding: 4px; 24 | width: 320px; 25 | height: 32px; 26 | box-sizing: border-box; 27 | } 28 | 29 | /** 30 | * "Get all" button 31 | */ 32 | .ac_button { 33 | display: inline-block; 34 | vertical-align: text-bottom; 35 | border: 1px solid #888; 36 | border-left: 0; 37 | cursor: pointer; 38 | position: relative; 39 | text-align: center; 40 | width: 32px; 41 | height: 32px; 42 | box-sizing: border-box; 43 | color: #666; 44 | } 45 | 46 | .ac_button > img { 47 | top: 6px; 48 | left: 8px; 49 | height: 16px; 50 | position: absolute; 51 | width: 16px; 52 | } 53 | 54 | .ac_btn_out { 55 | background: #ddd; 56 | } 57 | 58 | .ac_btn_on { 59 | background: #ccc; 60 | } 61 | 62 | .octicon-chevron-down { 63 | display: inline-block; 64 | fill: currentColor; 65 | height: 1.5em; 66 | margin-top: 0.22em; 67 | } 68 | 69 | /** 70 | * Results 71 | */ 72 | .ac_result_area { 73 | background-color: transparent; 74 | border: 1px solid #888; 75 | box-shadow: 1px 1px 1px #aaa; 76 | display: none; 77 | list-style: none; 78 | margin: 0; 79 | padding: 0; 80 | position: absolute; 81 | z-index: 100; 82 | } 83 | 84 | .ac_results { 85 | background-color: white; 86 | list-style: none; 87 | margin: 0; 88 | padding: 0; 89 | } 90 | 91 | .ac_results > li { 92 | color: #000; 93 | font-size: 0.9em; 94 | height: auto !important; 95 | line-height: 1; 96 | margin: 0; 97 | overflow: hidden; 98 | line-height: 1.6; 99 | position: relative; 100 | text-align: left; 101 | white-space: nowrap; 102 | } 103 | 104 | .ac_selected { 105 | background-color: #def; 106 | font-weight: bold; 107 | } 108 | 109 | .ac_over { 110 | background-color: #47c; 111 | color: #fff !important; 112 | cursor: pointer; 113 | } 114 | 115 | /** 116 | * 選択していないほうの表示を暗くする 117 | */ 118 | .ac_results_off { 119 | background: #eee; 120 | } 121 | 122 | .ac_input_off { 123 | background: #eee; 124 | color: #555; 125 | } 126 | 127 | .ac_hide { 128 | display: none; 129 | } 130 | 131 | /** 132 | * Navi 133 | */ 134 | .ac_navi { 135 | background: #eee; 136 | border-bottom: 1px solid #888; 137 | font-size: 0.8em; 138 | font-weight: normal; 139 | line-height: 1; 140 | margin: 0; 141 | padding: 0.4em 0.3em; 142 | text-align: right; 143 | } 144 | 145 | .ac_navi > p > a:link, 146 | .ac_navi > p > a:visited, 147 | .ac_navi > p > a:hover, 148 | .ac_navi > p > a:active { 149 | color: #23c; 150 | font-weight: normal; 151 | margin: 0 0.2em; 152 | text-decoration: underline; 153 | } 154 | 155 | .ac_navi > p { 156 | color: black; 157 | font-size: 1.1em; 158 | margin: 0; 159 | padding-top: 0.3em; 160 | text-align: center; 161 | } 162 | 163 | .ac_navi > p > a >.current { 164 | color: #00c; 165 | font-size: 1em; 166 | font-weight: bold; 167 | } 168 | 169 | .ac_navi > p >.page_end { 170 | color: gray; 171 | font-weight: normal; 172 | margin: 0 0.2em; 173 | } 174 | 175 | .navi_page, 176 | .navi_first, 177 | .navi_prev, 178 | .navi_next, 179 | .navi_last { 180 | margin: auto 0.2em !important; 181 | } 182 | 183 | .ac_navi > .info { 184 | margin: 0 !important; 185 | padding: 0 !important; 186 | } 187 | 188 | /** 189 | * Sub-info 190 | */ 191 | .ac_subinfo { 192 | margin: 0 !important; 193 | padding: 0 !important; 194 | } 195 | 196 | .ac_subinfo > dl { 197 | background: #eee; 198 | border: 1px solid #aaa; 199 | box-shadow: 1px 1px 1px #aaa; 200 | color: #000; 201 | display: none; 202 | margin: 0; 203 | position: absolute; 204 | width: 260px; 205 | z-index: 200; 206 | font-size: 0.85em; 207 | line-height: 1.5; 208 | } 209 | 210 | .ac_subinfo > dl > dt { 211 | background: #CEDFF7; 212 | clear: both; 213 | color: #37486A; 214 | float: left; 215 | font-weight: normal; 216 | margin: 0; 217 | padding: 0 0.3em; 218 | text-align: left; 219 | width: 100px; 220 | word-wrap: break-word; 221 | box-sizing: border-box; 222 | } 223 | 224 | .ac_subinfo > dl > dt.hide { 225 | display: none !important; 226 | } 227 | 228 | .ac_subinfo > dl > dd { 229 | float: left; 230 | margin: 0; 231 | padding: 0 0.3em; 232 | width: 160px; 233 | word-wrap: break-word; 234 | box-sizing: border-box; 235 | } 236 | 237 | /** 238 | * Select only 239 | */ 240 | .ac_container > .ac_select_ng { 241 | background: #fcc; 242 | } 243 | -------------------------------------------------------------------------------- /dist/css/jquery.ajax-combobox.min.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";.ac_container{border:0;margin:0;padding:0;display:inline-block;vertical-align:text-bottom;position:relative}.ac_input{background-color:white;border-right:0;border:1px solid #888;vertical-align:text-bottom;display:inline-block;font-size:16px;margin:0;padding:4px;width:320px;height:32px;box-sizing:border-box}.ac_button{display:inline-block;vertical-align:text-bottom;border:1px solid #888;border-left:0;cursor:pointer;position:relative;text-align:center;width:32px;height:32px;box-sizing:border-box;color:#666}.ac_button>img{top:6px;left:8px;height:16px;position:absolute;width:16px}.ac_btn_out{background:#ddd}.ac_btn_on{background:#ccc}.octicon-chevron-down{display:inline-block;fill:currentColor;height:1.5em;margin-top:.22em}.ac_result_area{background-color:transparent;border:1px solid #888;box-shadow:1px 1px 1px #aaa;display:none;list-style:none;margin:0;padding:0;position:absolute;z-index:100}.ac_results{background-color:white;list-style:none;margin:0;padding:0}.ac_results>li{color:#000;font-size:.9em;height:auto !important;line-height:1;margin:0;overflow:hidden;line-height:1.6;position:relative;text-align:left;white-space:nowrap}.ac_selected{background-color:#def;font-weight:bold}.ac_over{background-color:#47c;color:#fff !important;cursor:pointer}.ac_results_off{background:#eee}.ac_input_off{background:#eee;color:#555}.ac_hide{display:none}.ac_navi{background:#eee;border-bottom:1px solid #888;font-size:.8em;font-weight:normal;line-height:1;margin:0;padding:.4em .3em;text-align:right}.ac_navi>p>a:link,.ac_navi>p>a:visited,.ac_navi>p>a:hover,.ac_navi>p>a:active{color:#23c;font-weight:normal;margin:0 .2em;text-decoration:underline}.ac_navi>p{color:black;font-size:1.1em;margin:0;padding-top:.3em;text-align:center}.ac_navi>p>a>.current{color:#00c;font-size:1em;font-weight:bold}.ac_navi>p>.page_end{color:gray;font-weight:normal;margin:0 .2em}.navi_page,.navi_first,.navi_prev,.navi_next,.navi_last{margin:auto .2em !important}.ac_navi>.info{margin:0 !important;padding:0 !important}.ac_subinfo{margin:0 !important;padding:0 !important}.ac_subinfo>dl{background:#eee;border:1px solid #aaa;box-shadow:1px 1px 1px #aaa;color:#000;display:none;margin:0;position:absolute;width:260px;z-index:200;font-size:.85em;line-height:1.5}.ac_subinfo>dl>dt{background:#cedff7;clear:both;color:#37486a;float:left;font-weight:normal;margin:0;padding:0 .3em;text-align:left;width:100px;word-wrap:break-word;box-sizing:border-box}.ac_subinfo>dl>dt.hide{display:none !important}.ac_subinfo>dl>dd{float:left;margin:0;padding:0 .3em;width:160px;word-wrap:break-word;box-sizing:border-box}.ac_container>.ac_select_ng{background:#fcc} 2 | -------------------------------------------------------------------------------- /dist/php/AjaxComboBox.php: -------------------------------------------------------------------------------- 1 | db = $this->connectDB($connect); 24 | 25 | // 初期値取得、またはキーワード検索ののちにJavaScriptへ結果を返す 26 | echo json_encode( 27 | (isset($_GET['page_num'])) ? 28 | $this->getSearchValue() : 29 | $this->getInitialValue() 30 | ); 31 | 32 | // DB接続を終了 33 | $this->db = null; 34 | } 35 | 36 | /** 37 | * DBと接続し、プロパティに保存する 38 | * @param array DB接続用の情報を収めた連想配列 39 | * @return object PDO object 40 | */ 41 | public static function connectDB($connect) 42 | { 43 | $db = new PDO( 44 | $connect['dsn'], 45 | $connect['username'], 46 | $connect['password'], 47 | array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION) 48 | ); 49 | $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 50 | 51 | // クオーテーションをダブルクオートで統一する。(MySQLの場合のみ) 52 | if ($db->getAttribute(PDO::ATTR_DRIVER_NAME) == 'mysql') $db->query("SET sql_mode='ANSI_QUOTES'"); 53 | return $db; 54 | } 55 | 56 | /** 57 | * 通常検索を行う 58 | * @return array ヒットしたレコードと件数を収めた連想配列 59 | */ 60 | public function getSearchValue() 61 | { 62 | $this->param = $this->validateParam(); 63 | $this->param = $this->arrangeParam($this->param); 64 | 65 | // 全件取得、またはキーワード検索を行う 66 | $this->query = ($this->param['q_word'][0] == '') ? 67 | $this->makeSqlAll() : 68 | $this->makeSqlSuggest(); 69 | 70 | return $this->queryDB(); 71 | } 72 | 73 | /** 74 | * JavaScriptから送られた値を無害化する 75 | * @return array 無害化されたパラメータを収めた連想配列 76 | */ 77 | public function validateParam() 78 | { 79 | // GET送信されたパラメータをひとつずつ配列に格納する。 80 | $p = array( 81 | 'db_table' => $_GET['db_table'], 82 | 'page_num' => $_GET['page_num'], 83 | 'per_page' => $_GET['per_page'], 84 | 'and_or' => $_GET['and_or'], 85 | 'order_by' => $_GET['order_by'], 86 | 'search_field' => $_GET['search_field'], 87 | 'q_word' => $_GET['q_word'] 88 | ); 89 | 90 | // 正しい値かどうかを確かめつつ無害化する。 91 | // ユーザ入力を信用せず、クオートで囲む。 92 | $p['db_table'] = '"' . $p['db_table'] . '"'; 93 | $p['page_num'] = (is_numeric($p['page_num'])) ? $p['page_num'] : 0; 94 | $p['per_page'] = (is_numeric($p['per_page'])) ? $p['per_page'] : 10; 95 | $p['and_or'] = (preg_match('/or/iu', $p['and_or'])) ? 'OR' : 'AND'; 96 | for ($i = 0; $i < count($p['order_by']); $i++) { 97 | $p['order_by'][$i] = '"' . $p['order_by'][$i][0] . '" ' . ( 98 | (preg_match('/desc/iu', $p['order_by'][$i][1])) ? 'DESC' : 'ASC' 99 | ); 100 | } 101 | for ($i = 0; $i < count($p['search_field']); $i++) { 102 | $p['search_field'][$i] = '"' . $p['search_field'][$i] . '"'; 103 | } 104 | 105 | // ワイルドカードをエスケープする。 106 | for ($i = 0; $i < count($p['q_word']); $i++) { 107 | $p['q_word'][$i] = str_replace( 108 | array('\\', '%', '_'), 109 | array('\\\\', '\%', '\_'), 110 | $p['q_word'][$i] 111 | ); 112 | } 113 | return $p; 114 | } 115 | 116 | /** 117 | * パラメータを整形する 118 | * @param array $p パラメータを収めた連想配列 119 | * @return array 整形後のパラメータを収めた連想配列 120 | */ 121 | public function arrangeParam($p) 122 | { 123 | // OFFSET句用 124 | $p['offset'] = ($p['page_num'] - 1) * $p['per_page']; 125 | 126 | // ORDER BY句用 127 | $p['order_by'] = join(',', $p['order_by']); 128 | 129 | // SQLite用にESCAPE節を追加する 130 | $p['esc'] = ($this->db->getAttribute(PDO::ATTR_DRIVER_NAME) == 'sqlite') ? "ESCAPE '\'" : ''; 131 | return $p; 132 | } 133 | 134 | /** 135 | * 全件取得用のSQLを作成する 136 | * @return array 全件取得用と件数取得用の2種類のSQLを収めた配列 137 | */ 138 | public function makeSqlAll() 139 | { 140 | return array( 141 | // 全件取得用 142 | sprintf( 143 | "SELECT * FROM %s ORDER BY %s LIMIT %s OFFSET %s", 144 | $this->param['db_table'], 145 | $this->param['order_by'], 146 | $this->param['per_page'], 147 | $this->param['offset'] 148 | ), 149 | // 件数取得用 150 | "SELECT COUNT(*) FROM {$this->param['db_table']}" 151 | ); 152 | } 153 | 154 | /** 155 | * 検索用にSQLを作成する 156 | * @return array 検索用と件数取得用の2種類のSQLを収めた配列 157 | */ 158 | public function makeSqlSuggest() 159 | { 160 | // 明示的に初期化。 161 | $this->bind = array(); 162 | 163 | // WHERE 164 | $depth1 = array(); 165 | for ($i = 0; $i < count($this->param['q_word']); $i++) { 166 | $depth2 = array(); 167 | for ($j = 0; $j < count($this->param['search_field']); $j++) { 168 | $depth2[] = "{$this->param['search_field'][$j]} LIKE ? {$this->param['esc']} "; 169 | $this->bind[] = '%'.$this->param['q_word'][$i].'%'; 170 | } 171 | $depth1[] = '(' . join(' OR ', $depth2) . ')'; 172 | } 173 | $this->param['where'] = join(" {$this->param['and_or']} ", $depth1); 174 | 175 | // ORDER BY 176 | $cnt = 0; 177 | $str = '(CASE '; 178 | for ($i = 0; $i < count($this->param['q_word']); $i++) { 179 | for ($j = 0; $j < count($this->param['search_field']); $j++) { 180 | $str .= "WHEN {$this->param['search_field'][$j]} = ? "; 181 | $this->bind[] = $this->param['q_word'][$i]; 182 | $str .= "THEN $cnt "; 183 | 184 | $cnt++; 185 | $str .= "WHEN {$this->param['search_field'][$j]} LIKE ? {$this->param['esc']} "; 186 | $this->bind[] = $this->param['q_word'][$i].'%'; 187 | $str .= "THEN $cnt "; 188 | 189 | $cnt++; 190 | $str .= "WHEN {$this->param['search_field'][$j]} LIKE ? {$this->param['esc']} "; 191 | $this->bind[] = '%'.$this->param['q_word'][$i].'%'; 192 | $str .= "THEN $cnt "; 193 | } 194 | } 195 | $cnt++; 196 | $this->param['whole_order'] = $str . "ELSE $cnt END), {$this->param['order_by']}"; 197 | 198 | // SQL文を返す 199 | return array( 200 | // 検索用 201 | sprintf( 202 | "SELECT * FROM %s WHERE %s ORDER BY %s LIMIT %s OFFSET %s", 203 | $this->param['db_table'], 204 | $this->param['where'], 205 | $this->param['whole_order'], 206 | $this->param['per_page'], 207 | $this->param['offset'] 208 | ), 209 | // 件数取得用 210 | "SELECT COUNT(*) FROM {$this->param['db_table']} WHERE {$this->param['where']}" 211 | ); 212 | } 213 | 214 | /** 215 | * DBへ問い合わせる。 216 | * @return array ヒットしたレコードと件数を収めた連想配列 217 | */ 218 | public function queryDB() 219 | { 220 | $return = array(); 221 | $cnt = count($this->bind); 222 | 223 | // 検索する 224 | $sth = $this->db->prepare($this->query[0]); 225 | if ($cnt > 0) { 226 | for ($i = 0; $i < $cnt; $i++) { 227 | $sth->bindValue($i + 1, $this->bind[$i], PDO::PARAM_STR); 228 | } 229 | } 230 | $sth->execute(); 231 | $return['result'] = $sth->fetchAll(PDO::FETCH_ASSOC); 232 | 233 | // 検索にヒットした件数を求める 234 | $sth = $this->db->prepare($this->query[1]); 235 | if ($cnt > 0) { 236 | $j = count($this->param['q_word']) * count($this->param['search_field']); 237 | for ($i = 0; $i < $j; $i++) { 238 | $sth->bindValue($i + 1, $this->bind[$i], PDO::PARAM_STR); 239 | } 240 | } 241 | $sth->execute(); 242 | $row = $sth->fetch(PDO::FETCH_NUM); 243 | $return['cnt_whole'] = $row[0]; 244 | 245 | // ヒットしたレコードと件数を返す 246 | return $return; 247 | } 248 | 249 | /** 250 | * コンボボックスの初期値を求める 251 | */ 252 | public function getInitialValue() 253 | { 254 | // JavaScriptから受け取った値を浄化する 255 | $p = array( 256 | 'db_table' => '"' . $_GET['db_table'] . '"', 257 | 'pkey_name' => '"' . $_GET['pkey_name'] . '"', 258 | 'pkey_val' => $_GET['pkey_val'] 259 | ); 260 | 261 | $sth = $this->db->prepare( 262 | sprintf( 263 | "SELECT * FROM %s WHERE %s = ?", 264 | $p['db_table'], 265 | $p['pkey_name'] 266 | ) 267 | ); 268 | $sth->bindValue(1, $p['pkey_val'], PDO::PARAM_STR); 269 | $sth->execute(); 270 | return $sth->fetch(PDO::FETCH_ASSOC); 271 | } 272 | } -------------------------------------------------------------------------------- /dist/php/bitly.php: -------------------------------------------------------------------------------- 1 | 'mysql:host=localhost;dbname=test;charset=utf8;port=3360', 9 | 'username' => 'root', 10 | 'password' => '' 11 | ); 12 | $sqlite = array( 13 | 'dsn' => 'sqlite:../../sample/sample.sqlite3', 14 | 'username' => '', 15 | 'password' => '' 16 | ); 17 | new AjaxComboBox($sqlite); 18 | // new AjaxComboBox($mysql); 19 | //++++++++++++++++++++++++++++++++++++++++++++++++++++ 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jquery.ajax-combobox 7 | 8 | 9 | 10 | 11 | 37 |
38 |
39 |

jquery.ajax-combobox

40 |

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

41 |

42 | github repository 43 | npm version 44 |

45 |
46 |
47 |
48 |
49 |
50 | Search 51 |
52 |

Search

53 |

54 | Type search words. 55 |

56 |
57 |
58 |
59 | Display All 60 |
61 |

Display All

62 |

63 | Shortcut key: Down 64 |

65 |
66 |
67 |
68 | Paging 69 |
70 |

Paging

71 |

72 | Shortcut key: Left, Right 73 |

74 |
75 |
76 |
77 |
78 | 79 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /node_modules/mocha/mocha.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body { 4 | margin:0; 5 | } 6 | 7 | #mocha { 8 | font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | margin: 60px 50px; 10 | } 11 | 12 | #mocha ul, 13 | #mocha li { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | #mocha ul { 19 | list-style: none; 20 | } 21 | 22 | #mocha h1, 23 | #mocha h2 { 24 | margin: 0; 25 | } 26 | 27 | #mocha h1 { 28 | margin-top: 15px; 29 | font-size: 1em; 30 | font-weight: 200; 31 | } 32 | 33 | #mocha h1 a { 34 | text-decoration: none; 35 | color: inherit; 36 | } 37 | 38 | #mocha h1 a:hover { 39 | text-decoration: underline; 40 | } 41 | 42 | #mocha .suite .suite h1 { 43 | margin-top: 0; 44 | font-size: .8em; 45 | } 46 | 47 | #mocha .hidden { 48 | display: none; 49 | } 50 | 51 | #mocha h2 { 52 | font-size: 12px; 53 | font-weight: normal; 54 | cursor: pointer; 55 | } 56 | 57 | #mocha .suite { 58 | margin-left: 15px; 59 | } 60 | 61 | #mocha .test { 62 | margin-left: 15px; 63 | overflow: hidden; 64 | } 65 | 66 | #mocha .test.pending:hover h2::after { 67 | content: '(pending)'; 68 | font-family: arial, sans-serif; 69 | } 70 | 71 | #mocha .test.pass.medium .duration { 72 | background: #c09853; 73 | } 74 | 75 | #mocha .test.pass.slow .duration { 76 | background: #b94a48; 77 | } 78 | 79 | #mocha .test.pass::before { 80 | content: '✓'; 81 | font-size: 12px; 82 | display: block; 83 | float: left; 84 | margin-right: 5px; 85 | color: #00d6b2; 86 | } 87 | 88 | #mocha .test.pass .duration { 89 | font-size: 9px; 90 | margin-left: 5px; 91 | padding: 2px 5px; 92 | color: #fff; 93 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 94 | -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 95 | box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 96 | -webkit-border-radius: 5px; 97 | -moz-border-radius: 5px; 98 | -ms-border-radius: 5px; 99 | -o-border-radius: 5px; 100 | border-radius: 5px; 101 | } 102 | 103 | #mocha .test.pass.fast .duration { 104 | display: none; 105 | } 106 | 107 | #mocha .test.pending { 108 | color: #0b97c4; 109 | } 110 | 111 | #mocha .test.pending::before { 112 | content: '◦'; 113 | color: #0b97c4; 114 | } 115 | 116 | #mocha .test.fail { 117 | color: #c00; 118 | } 119 | 120 | #mocha .test.fail pre { 121 | color: black; 122 | } 123 | 124 | #mocha .test.fail::before { 125 | content: '✖'; 126 | font-size: 12px; 127 | display: block; 128 | float: left; 129 | margin-right: 5px; 130 | color: #c00; 131 | } 132 | 133 | #mocha .test pre.error { 134 | color: #c00; 135 | max-height: 300px; 136 | overflow: auto; 137 | } 138 | 139 | #mocha .test .html-error { 140 | overflow: auto; 141 | color: black; 142 | line-height: 1.5; 143 | display: block; 144 | float: left; 145 | clear: left; 146 | font: 12px/1.5 monaco, monospace; 147 | margin: 5px; 148 | padding: 15px; 149 | border: 1px solid #eee; 150 | max-width: 85%; /*(1)*/ 151 | max-width: -webkit-calc(100% - 42px); 152 | max-width: -moz-calc(100% - 42px); 153 | max-width: calc(100% - 42px); /*(2)*/ 154 | max-height: 300px; 155 | word-wrap: break-word; 156 | border-bottom-color: #ddd; 157 | -webkit-box-shadow: 0 1px 3px #eee; 158 | -moz-box-shadow: 0 1px 3px #eee; 159 | box-shadow: 0 1px 3px #eee; 160 | -webkit-border-radius: 3px; 161 | -moz-border-radius: 3px; 162 | border-radius: 3px; 163 | } 164 | 165 | #mocha .test .html-error pre.error { 166 | border: none; 167 | -webkit-border-radius: 0; 168 | -moz-border-radius: 0; 169 | border-radius: 0; 170 | -webkit-box-shadow: 0; 171 | -moz-box-shadow: 0; 172 | box-shadow: 0; 173 | padding: 0; 174 | margin: 0; 175 | margin-top: 18px; 176 | max-height: none; 177 | } 178 | 179 | /** 180 | * (1): approximate for browsers not supporting calc 181 | * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border) 182 | * ^^ seriously 183 | */ 184 | #mocha .test pre { 185 | display: block; 186 | float: left; 187 | clear: left; 188 | font: 12px/1.5 monaco, monospace; 189 | margin: 5px; 190 | padding: 15px; 191 | border: 1px solid #eee; 192 | max-width: 85%; /*(1)*/ 193 | max-width: -webkit-calc(100% - 42px); 194 | max-width: -moz-calc(100% - 42px); 195 | max-width: calc(100% - 42px); /*(2)*/ 196 | word-wrap: break-word; 197 | border-bottom-color: #ddd; 198 | -webkit-box-shadow: 0 1px 3px #eee; 199 | -moz-box-shadow: 0 1px 3px #eee; 200 | box-shadow: 0 1px 3px #eee; 201 | -webkit-border-radius: 3px; 202 | -moz-border-radius: 3px; 203 | border-radius: 3px; 204 | } 205 | 206 | #mocha .test h2 { 207 | position: relative; 208 | } 209 | 210 | #mocha .test a.replay { 211 | position: absolute; 212 | top: 3px; 213 | right: 0; 214 | text-decoration: none; 215 | vertical-align: middle; 216 | display: block; 217 | width: 15px; 218 | height: 15px; 219 | line-height: 15px; 220 | text-align: center; 221 | background: #eee; 222 | font-size: 15px; 223 | -webkit-border-radius: 15px; 224 | -moz-border-radius: 15px; 225 | border-radius: 15px; 226 | -webkit-transition:opacity 200ms; 227 | -moz-transition:opacity 200ms; 228 | -o-transition:opacity 200ms; 229 | transition: opacity 200ms; 230 | opacity: 0.3; 231 | color: #888; 232 | } 233 | 234 | #mocha .test:hover a.replay { 235 | opacity: 1; 236 | } 237 | 238 | #mocha-report.pass .test.fail { 239 | display: none; 240 | } 241 | 242 | #mocha-report.fail .test.pass { 243 | display: none; 244 | } 245 | 246 | #mocha-report.pending .test.pass, 247 | #mocha-report.pending .test.fail { 248 | display: none; 249 | } 250 | #mocha-report.pending .test.pass.pending { 251 | display: block; 252 | } 253 | 254 | #mocha-error { 255 | color: #c00; 256 | font-size: 1.5em; 257 | font-weight: 100; 258 | letter-spacing: 1px; 259 | } 260 | 261 | #mocha-stats { 262 | position: fixed; 263 | top: 15px; 264 | right: 10px; 265 | font-size: 12px; 266 | margin: 0; 267 | color: #888; 268 | z-index: 1; 269 | } 270 | 271 | #mocha-stats .progress { 272 | float: right; 273 | padding-top: 0; 274 | 275 | /** 276 | * Set safe initial values, so mochas .progress does not inherit these 277 | * properties from Bootstrap .progress (which causes .progress height to 278 | * equal line height set in Bootstrap). 279 | */ 280 | height: auto; 281 | -webkit-box-shadow: none; 282 | -moz-box-shadow: none; 283 | box-shadow: none; 284 | background-color: initial; 285 | } 286 | 287 | #mocha-stats em { 288 | color: black; 289 | } 290 | 291 | #mocha-stats a { 292 | text-decoration: none; 293 | color: inherit; 294 | } 295 | 296 | #mocha-stats a:hover { 297 | border-bottom: 1px solid #eee; 298 | } 299 | 300 | #mocha-stats li { 301 | display: inline-block; 302 | margin: 0 5px; 303 | list-style: none; 304 | padding-top: 11px; 305 | } 306 | 307 | #mocha-stats canvas { 308 | width: 40px; 309 | height: 40px; 310 | } 311 | 312 | #mocha code .comment { color: #ddd; } 313 | #mocha code .init { color: #2f6fad; } 314 | #mocha code .string { color: #5890ad; } 315 | #mocha code .keyword { color: #8a6343; } 316 | #mocha code .number { color: #2f6fad; } 317 | 318 | @media screen and (max-device-width: 480px) { 319 | #mocha { 320 | margin: 60px 0px; 321 | } 322 | 323 | #mocha #stats { 324 | position: absolute; 325 | } 326 | } 327 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.ajax-combobox", 3 | "description": "jQuery plugin to create a text box which can auto-complete and pull-down-select.", 4 | "license": "MIT", 5 | "version": "7.5.3", 6 | "author": "Yuusaku Miyazaki ", 7 | "homepage": "https://github.com/sutara79/jquery.ajax-combobox", 8 | "main": "dist/jquery.ajax-combobox.min.js", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/sutara79/jquery.ajax-combobox.git" 12 | }, 13 | "keywords": [ 14 | "jquery-plugin" 15 | ], 16 | "dependencies": { 17 | "jquery": "^3.3.1" 18 | }, 19 | "devDependencies": { 20 | "mocha": "^5.2.0", 21 | "power-assert": "^1.6.0", 22 | "puppeteer": "^1.7.0", 23 | "webpack": "^4.16.5", 24 | "webpack-cli": "^3.1.0" 25 | }, 26 | "scripts": { 27 | "test": "node ./test/js/test.js", 28 | "watch": "webpack --watch", 29 | "map": "webpack --devtool source-map", 30 | "build": "webpack" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ./test/php/AjaxComboBoxTest.php 5 | 6 | 7 | 8 | 9 | ./dist/php 10 | 11 | ./dist/php/jquery.ajax-combobox.php 12 | ./dist/php/bitly.php 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /sample/after-select-basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | After select: Basic: jquery.ajax-combobox 7 | 8 | 9 | 10 | 24 | 25 | 26 |

After select: Basic: jquery.ajax-combobox

27 |
28 |
29 | 30 |

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /sample/after-select-basic/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/after-select-is-enter-key/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | After select: "is_enter_key": jquery.ajax-combobox 7 | 8 | 9 | 10 | 31 | 32 | 33 |

After select: "is_enter_key": jquery.ajax-combobox

34 |
35 |
36 | 37 |

38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /sample/after-select-is-enter-key/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/amount-to-display-at-once/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Amount to display at once: jquery.ajax-combobox 7 | 8 | 9 | 10 | 22 | 23 | 24 |

Amount to display at once: jquery.ajax-combobox

25 |
26 |
27 | 28 |

29 |
30 | 31 | -------------------------------------------------------------------------------- /sample/amount-to-display-at-once/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Basic: jquery.ajax-combobox 7 | 8 | 9 | 10 | 11 | 37 |
38 |
39 |

40 | jquery.ajax-combobox
41 | Basic 42 |

43 |
44 |
45 |
46 |
47 | 89 |
90 |
91 |
92 | Usage 93 | 使い方 94 |
95 |
96 |
97 | 98 | Sample 99 | 100 | 101 |
102 |

103 | 1st arg: File name to send data by Ajax
104 | 2nd arg: Options 105 |

106 |

107 | 第1引数にAjax送信先のファイル名を、
108 | 第2引数にオプションを設定します。 109 |

110 |
HTML
111 | 
112 | <link rel="stylesheet" href="jquery.ajax-combobox.css">
113 | 
114 | <input id="foo" type="text">
115 | 
116 | <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
117 | <script src="jquery.ajax-combobox.min.js"></script>
118 |
119 |
JavaScript
120 | 
121 | $('#foo').ajaxComboBox(
122 |   'jquery.ajax-combobox.php',
123 |   {
124 |     lang: 'en', // Set language to English
125 |     db_table: 'nation', // DB table to search
126 |     button_img: 'btn.png', // Image for pull-down button
127 |   }
128 | );
129 |
130 |
131 |
132 | 133 |
134 |
135 | Amount to display at once 136 | 一度に表示する数 137 |
138 |
139 |
140 | 141 | Sample 142 | 143 | 144 |
145 | 
146 | $('#foo').ajaxComboBox(
147 |   'jquery.ajax-combobox.php',
148 |   {
149 |     per_page: 20, // Amount of list items
150 |     navi_num: 10 // Amount of pages
151 |   }
152 | );
153 |
154 |
155 |
156 | 157 |
158 |
159 | Search multi fields 160 | 複数のフィールドから検索 161 |
162 |
163 |
164 | 165 | Sample 166 | 167 | 168 |
169 |

When you set options below, besides its name, you can search by id.

170 |

下記のように指定することで、名前の他にIDでも検索できます。

171 | 
172 | $('#foo').ajaxComboBox(
173 |   'jquery.ajax-combobox.php',
174 |   {
175 |     search_field: 'name, id'
176 |   }
177 | );
178 |
179 |
180 |
181 | 182 |
183 |
184 | "OR" search 185 | OR検索へ切り替える 186 |
187 |
188 |
189 | 190 | Sample 191 | 192 | 193 |
194 |

195 | Default is "AND". You can change it to "OR".
196 |

197 |

198 | デフォルトはAND検索ですがOR検索にすることもできます。
199 |

200 | 
201 | $('#foo').ajaxComboBox(
202 |   'jquery.ajax-combobox.php',
203 |   {
204 |     and_or: 'OR'
205 |   }
206 | );
207 |
208 |
209 |
210 | 211 |
212 |
213 | Sorting 214 | 並べ替えの規則を決める 215 |
216 |
217 |
218 | 219 | Sample 220 | 221 | 222 |
223 |

224 | Basically, list is ordered by search_field option.
225 | You can change it by order_by option. 226 |

227 |

228 | 基本的には、"search_field"オプションに指定されたフィールドの昇順に並べ替えられます。
229 | "order_by"オプションで任意に指定することもできます。 230 |

231 | 
232 | $('#foo').ajaxComboBox(
233 |   'jquery.ajax-combobox.php',
234 |   {
235 |     order_by: [
236 |       'name DESC', // ASC or DESC should be UPPERCASE.
237 |       'created'
238 |     ]
239 |   }
240 | );
241 |
242 |
243 |
244 | 245 |
246 |
247 | Language 248 | メッセージの言語 249 |
250 |
251 |
252 | 253 | Sample 254 | 255 | 256 |
257 |

258 | Set lang option to choose language used in this plugin's UI. 259 |

260 |

261 | このプラグインのUIで使う言語をlangオプションで指定してください。 262 |

263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 |
Option valueLanguage
deGerman
(Thanks Sebastian Gohres)
en (default)English
esSpanish
(Thanks Joaquin G. de la Zerda)
pt-brBrazilian Portuguese
(Thanks Marcio de Souza)
jaJapanese
273 |
274 | 275 |
276 |
277 | Simple page navi 278 | ページナビをシンプルに 279 |
280 |
281 |
282 | 283 | Sample 284 | 285 | 286 |
287 |

288 | Set navi_simple when you want to narrow the width of the ComboBox as much as possible.
289 | Shortcut key is still enable. (Shift+Left/Right) 290 |

291 |

292 | ComboBoxの幅をできるだけ狭くしたい場合は、navi_simpleオプションで先頭・末尾のページへのリンクを非表示にできます。
293 | なお、キーボードのショートカットは有効のままです。(Shift+右/左) 294 |

295 | 
296 | $('#foo').ajaxComboBox(
297 |   'jquery.ajax-combobox.php',
298 |   {
299 |     navi_simple: true
300 |   }
301 | );
302 |
303 |
304 |
305 | 306 |
307 |
308 |
309 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | -------------------------------------------------------------------------------- /sample/button-image/btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutara79/jquery.ajax-combobox/b52bdaa936713d8c79c16b0707c07a4d49c19f1b/sample/button-image/btn.png -------------------------------------------------------------------------------- /sample/button-image/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Button image: jquery.ajax-combobox 7 | 8 | 9 | 10 | 45 | 46 | 47 |

Button image: jquery.ajax-combobox

48 |
49 |

50 |
51 | 52 |

53 |

54 |
55 | 56 |

57 |

58 |
59 | 60 |

61 |

62 |
63 | 64 |

65 |

66 |
67 | 68 | -------------------------------------------------------------------------------- /sample/button-image/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/disable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sample: Disable Combobox (using option.instance) 7 | 8 | 9 | 10 | 55 | 56 | 57 |

Sample: Disable Combobox (using option.instance)

58 | 61 | 62 |
63 | 64 |

65 |
66 | 67 | -------------------------------------------------------------------------------- /sample/disable/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/get-instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Get instance: jquery.ajax-combobox 7 | 8 | 9 | 10 | 25 | 26 | 27 |

Get instance: jquery.ajax-combobox

28 |
29 |
30 | 31 |

32 |
33 | 34 | -------------------------------------------------------------------------------- /sample/get-instance/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/img/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutara79/jquery.ajax-combobox/b52bdaa936713d8c79c16b0707c07a4d49c19f1b/sample/img/001.png -------------------------------------------------------------------------------- /sample/img/002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutara79/jquery.ajax-combobox/b52bdaa936713d8c79c16b0707c07a4d49c19f1b/sample/img/002.png -------------------------------------------------------------------------------- /sample/img/003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutara79/jquery.ajax-combobox/b52bdaa936713d8c79c16b0707c07a4d49c19f1b/sample/img/003.png -------------------------------------------------------------------------------- /sample/img/readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutara79/jquery.ajax-combobox/b52bdaa936713d8c79c16b0707c07a4d49c19f1b/sample/img/readme.png -------------------------------------------------------------------------------- /sample/initial-value/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Initial value: jquery.ajax-combobox 7 | 8 | 9 | 10 | 21 | 22 | 23 |

Initial value: jquery.ajax-combobox

24 |
25 |
26 | 27 |

28 |
29 | 30 | -------------------------------------------------------------------------------- /sample/initial-value/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sample: option.instance 7 | 8 | 9 | 10 | 38 | 39 | 40 |

Sample: option.instance

41 | 42 |
43 | 44 |

45 |
46 | 47 | -------------------------------------------------------------------------------- /sample/js-object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS object instead of DB: jquery.ajax-combobox 7 | 8 | 9 | 10 | 49 | 50 | 51 |

JS object instead of DB: jquery.ajax-combobox

52 |
53 |
54 | 55 |

56 |
57 | 58 | -------------------------------------------------------------------------------- /sample/js-object/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/language/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Language: jquery.ajax-combobox 7 | 8 | 9 | 10 | 49 | 50 | 51 |

Language: jquery.ajax-combobox

52 |
53 |

54 |
55 | 56 |

57 |

58 |
59 | 60 |

61 |

62 |
63 | 64 |

65 |

66 |
67 | 68 |

69 |

70 |
71 | 72 |

73 |

74 |
75 | 76 | -------------------------------------------------------------------------------- /sample/language/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/or-search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | "OR" search: jquery.ajax-combobox 7 | 8 | 9 | 10 | 21 | 22 | 23 |

"OR" search: jquery.ajax-combobox

24 |

Input ame ja to the text box below

25 |
26 |
27 | 28 |

29 |
30 | 31 | -------------------------------------------------------------------------------- /sample/or-search/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/sample.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #eee; 3 | -webkit-text-size-adjust: 100%; 4 | } 5 | .main { 6 | position: relative; 7 | } 8 | footer { 9 | background: #eee; 10 | } 11 | footer div { 12 | padding: 16px 0; 13 | text-align: right; 14 | } 15 | 16 | article form a.btn, 17 | article form input, 18 | article form button { 19 | margin-bottom: 4px; 20 | } 21 | .green { 22 | color: #5cb85c; 23 | } 24 | .red { 25 | color: #d9534f; 26 | } 27 | .btn-container { 28 | margin-bottom: 1.2em; 29 | } 30 | 31 | /** 32 | * 見出し横に表示される、自身へのリンク 33 | */ 34 | .js-anchor { 35 | font-size: 1em; 36 | left: 4px; 37 | position: absolute; 38 | visibility: hidden; 39 | } 40 | .card-header:hover .js-anchor { 41 | visibility: visible; 42 | } 43 | .js-anchor, 44 | .js-anchor:hover, 45 | .js-anchor:active { 46 | color: inherit; 47 | } 48 | .octicon { 49 | display: inline-block; 50 | fill: currentColor; 51 | height: 1.4em; 52 | vertical-align: text-bottom; 53 | } 54 | pre { 55 | background-color: #f5f5f5; 56 | border: 1px solid #ccc; 57 | border-radius: 2px; 58 | font-size: 0.9rem; 59 | line-height: 1.2; 60 | margin-bottom: 1em; 61 | padding: 0.5em; 62 | } 63 | 64 | .toc, 65 | .toc .btn { 66 | font-size: 0.95rem; 67 | } 68 | 69 | 70 | /** 71 | * Override Bootstrap4 72 | */ 73 | a, 74 | a:active { 75 | color: #486; 76 | } 77 | a:hover, 78 | a:focus { 79 | color: #375; 80 | } 81 | h5 { 82 | font-weight: normal; 83 | } 84 | h6 { 85 | color: #777; 86 | font-size: 14px; 87 | } 88 | .jumbotron { 89 | background-color: #486; 90 | background-image: linear-gradient(30deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260), 91 | linear-gradient(150deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260), 92 | linear-gradient(30deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260), 93 | linear-gradient(150deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260), 94 | linear-gradient(60deg, #4a8e6c 25%, transparent 25.5%, transparent 75%, #4a8e6c 75%, #4a8e6c), 95 | linear-gradient(60deg, #4a8e6c 25%, transparent 25.5%, transparent 75%, #4a8e6c 75%, #4a8e6c); 96 | background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; 97 | background-size: 80px 140px; 98 | color: #fff; 99 | text-shadow: 0 1px 1px #333; 100 | } 101 | .page-title { 102 | font-family: Arial; 103 | } 104 | .jumbotron-link, 105 | .jumbotron-link:hover { 106 | color: inherit; 107 | } 108 | .list-group-item:first-child { 109 | border-top-left-radius: 2px; 110 | border-top-right-radius: 2px; 111 | } 112 | .list-group-item:last-child { 113 | border-bottom-left-radius: 2px; 114 | border-bottom-right-radius: 2px; 115 | } 116 | .card { 117 | margin-bottom: 1.5em; 118 | } 119 | .card > .card-header { 120 | background-color: #777; 121 | border-color: #777; 122 | border-top-left-radius: 2px; 123 | border-top-right-radius: 2px; 124 | color: #fff; 125 | } 126 | .btn-primary { 127 | background-color: #597; 128 | border-color: #509472; 129 | } 130 | .btn-primary:disabled, 131 | .btn-primary:disabled:focus, 132 | .btn-primary:disabled:hover { 133 | background-color: #597; 134 | border-color: #509472; 135 | } 136 | .btn-primary:hover { 137 | background-color: #486; 138 | border-color: #3f8361; 139 | } 140 | .btn-primary:not([disabled]):not(.disabled).active, 141 | .btn-primary:not([disabled]):not(.disabled):active, 142 | .show > .btn-primary.dropdown-toggle, 143 | .btn-primary:active, 144 | .btn-primary:active:hover, 145 | .btn-primary:active:focus, 146 | .btn-primary:focus { 147 | background-color: #375; 148 | border-color: #2d7250; 149 | } 150 | .btn-primary:not([disabled]):not(.disabled).active, 151 | .btn-primary:not([disabled]):not(.disabled):active, 152 | .show > .btn-primary.dropdown-toggle, 153 | .btn-primary.focus, 154 | .btn-primary:focus { 155 | box-shadow: 0 0 0 0.2rem #6a8; 156 | color: #fff; 157 | } 158 | .list-group-item-action { 159 | outline: #fff none 0; 160 | } 161 | .list-group-item-action:focus, 162 | .list-group-item-action:hover, 163 | .list-group-item-action:active { 164 | background-color: #eee; 165 | } 166 | 167 | /* ONLY ajax-combobox */ 168 | body { 169 | padding-top: 3.5rem; /* for Bootstrap navbar */ 170 | } -------------------------------------------------------------------------------- /sample/sample.js: -------------------------------------------------------------------------------- 1 | // ページ内リンク(固定グローバルナビに対応) ajax-comboboxのみ 2 | $(document).on('click', '#contents a[href^="#"]', function(ev) { 3 | ev.preventDefault(); 4 | var href= $(this).attr('href'); 5 | var target = $((href == '#' || href === '') ? 'html' : href); 6 | var position = target.offset().top - 54; // -54 is .navbar height 7 | console.log(position); 8 | $('body, html').scrollTop(position); // can not use .animate on jquery.slim 9 | history.pushState('', '', $(this)[0].href); 10 | return false; 11 | }); 12 | 13 | // 英語・日本語切り替え 14 | $('.js-btn-lang').click(function(ev) { 15 | $('body [lang]').hide(); 16 | $('.js-btn-lang').removeAttr('disabled'); 17 | $('body [lang="' + $(ev.currentTarget).data('lang') + '"]').show(); 18 | $(ev.currentTarget).attr('disabled', 'disabled'); 19 | }); 20 | $('#lang-en').trigger('click'); 21 | 22 | // 追尾スクロール (英語・日本語切り替えよりも後にすること) 23 | $('#js-menu-follow').simpleScrollFollow({ 24 | min_width: 960, 25 | limit_elem: 'article', 26 | upper_side: '.navbar' 27 | }); 28 | 29 | // 見出し横のリンクを生成 30 | $('section.card').each(function() { 31 | var link = $('#'); 32 | $(link).attr('href', '#' + $(this).attr('id')); 33 | $(this).find('.card-header').prepend(link); 34 | }); -------------------------------------------------------------------------------- /sample/sample.sqlite3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sutara79/jquery.ajax-combobox/b52bdaa936713d8c79c16b0707c07a4d49c19f1b/sample/sample.sqlite3 -------------------------------------------------------------------------------- /sample/search-multi-fields/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Search multi fields: jquery.ajax-combobox 7 | 8 | 9 | 10 | 21 | 22 | 23 |

Search multi fields: jquery.ajax-combobox

24 |

Input 23 to the text box below

25 |
26 |
27 | 28 |

29 |
30 | 31 | -------------------------------------------------------------------------------- /sample/search-multi-fields/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/select-only-basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Select only: Basic: jquery.ajax-combobox 7 | 8 | 9 | 10 | 22 | 23 | 24 |

Select only: Basic: jquery.ajax-combobox

25 |
26 |
27 | 28 |

29 |
30 | 31 | -------------------------------------------------------------------------------- /sample/select-only-basic/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/select-only-primary-key/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Select only: Primary key: jquery.ajax-combobox 7 | 8 | 9 | 10 | 23 | 24 | 25 |

Select only: Primary key: jquery.ajax-combobox

26 |
27 |
28 | 29 |

30 |
31 | 32 | -------------------------------------------------------------------------------- /sample/select-only-primary-key/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/shorten-url/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Shorten URL: jquery.ajax-combobox 7 | 8 | 13 | 14 | 15 | 28 | 29 | 30 |

Shorten URL: jquery.ajax-combobox

31 |
32 | 39 |

40 | 41 | -------------------------------------------------------------------------------- /sample/simple-page-navi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple page navi: jquery.ajax-combobox 7 | 8 | 9 | 10 | 21 | 22 | 23 |

Simple page navi: jquery.ajax-combobox

24 |
25 |
26 | 27 |

28 |
29 | 30 | -------------------------------------------------------------------------------- /sample/simple-page-navi/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/simple-text-box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple text box: jquery.ajax-combobox 7 | 8 | 9 | 10 | 21 | 22 | 23 |

Simple text box: jquery.ajax-combobox

24 |
25 |
26 | 27 |

28 |
29 | 30 | -------------------------------------------------------------------------------- /sample/simple-text-box/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/sorting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sorting: jquery.ajax-combobox 7 | 8 | 9 | 10 | 24 | 25 | 26 |

Sorting: jquery.ajax-combobox

27 |
28 |
29 | 30 |

31 |
32 | 33 | -------------------------------------------------------------------------------- /sample/sorting/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/sub-info-basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sub info: Basic: jquery.ajax-combobox 7 | 8 | 9 | 10 | 21 | 22 | 23 |

Sub info: Basic: jquery.ajax-combobox

24 |
25 |
26 | 27 |

28 |
29 | 30 | -------------------------------------------------------------------------------- /sample/sub-info-basic/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/sub-info-change-title/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sub info: Change the title: jquery.ajax-combobox 7 | 8 | 9 | 10 | 26 | 27 | 28 |

Sub info: Change the title: jquery.ajax-combobox

29 |
30 |
31 | 32 |

33 |
34 | 35 | -------------------------------------------------------------------------------- /sample/sub-info-change-title/send.php: -------------------------------------------------------------------------------- 1 |
2 | Back -------------------------------------------------------------------------------- /sample/sub-info-divert/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sub info: Divert: jquery.ajax-combobox 7 | 8 | 9 | 10 | 31 | 32 | 33 |

Sub info: Divert: jquery.ajax-combobox

34 |
35 |
36 | 37 |

38 |
39 | 

40 | 
41 | 


--------------------------------------------------------------------------------
/sample/sub-info-divert/send.php:
--------------------------------------------------------------------------------
1 | 

2 | Back


--------------------------------------------------------------------------------
/sample/sub-info-hidden-field/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Sub info: Hidden field: jquery.ajax-combobox
 7 | 
 8 | 
 9 | 
10 | 
27 | 
28 | 
29 | 
Sub info: Hidden field: jquery.ajax-combobox

30 | 

31 |   

32 |   
33 |   

34 | 

35 | 
36 | 


--------------------------------------------------------------------------------
/sample/sub-info-hidden-field/send.php:
--------------------------------------------------------------------------------
1 | 

2 | Back


--------------------------------------------------------------------------------
/sample/sub-info-simple/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Sub info: Simple: jquery.ajax-combobox
 7 | 
 8 | 
 9 | 
10 | 
22 | 
23 | 
24 | 
Sub info: Simple: jquery.ajax-combobox

25 | 

26 |   

27 |   
28 |   

29 | 

30 | 
31 | 


--------------------------------------------------------------------------------
/sample/sub-info-simple/send.php:
--------------------------------------------------------------------------------
1 | 

2 | Back


--------------------------------------------------------------------------------
/sample/sub-info-visible-field/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Sub info: Visible field: jquery.ajax-combobox
 7 | 
 8 | 
 9 | 
10 | 
27 | 
28 | 
29 | 
Sub info: Visible field: jquery.ajax-combobox

30 | 

31 |   

32 |   
33 |   

34 | 

35 | 
36 | 


--------------------------------------------------------------------------------
/sample/sub-info-visible-field/send.php:
--------------------------------------------------------------------------------
1 | 

2 | Back


--------------------------------------------------------------------------------
/sample/sub-info.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | 
  5 | 
  6 | Sub info: jquery.ajax-combobox
  7 | 
  8 | 
  9 | 
 10 | 
 11 | 
 37 | 

 38 |   

 39 |     

 40 |       jquery.ajax-combobox

 41 |       Sub info
 42 |     

 43 |   

 44 | 

 45 | 

 46 |   

 47 |     
 85 |     

 86 |       

 87 |         

 88 |           Basic
 89 |           サブ情報の基本
 90 |         

 91 |         

 92 |           

 93 |             
 94 |               Sample
 95 |               
 96 |             
 97 |           

 98 |           

 99 |             Even though duplicate names exist, you can identify it by sub name.
100 |           

101 |           

102 |             名前が重複していてもサブ情報で区別できます。
103 |           

104 | 
105 | $('#foo').ajaxComboBox(
106 |   'jquery.ajax-combobox.php',
107 |   {
108 |     sub_info: true
109 |   }
110 | );
111 | 

112 |          

113 |       

114 | 
115 |       

116 |         

117 |           Change the title
118 |           表の項目名を変更する
119 |         

120 |         

121 |           

122 |             
123 |               Sample
124 |               
125 |             
126 |           

127 |           

128 |             sub_as option can change the title.
129 |           

130 |           

131 |             何も設定しないと、サブ情報の表の項目名はデータベースのカラム名が表示されてしまいます。

132 |             sub_asオプションで表示名を変更できます。
133 |           

134 | 
135 | $('#foo').ajaxComboBox(
136 |   'jquery.ajax-combobox.php',
137 |   {
138 |   sub_info: true,
139 |     sub_as: {
140 |       id: 'Employer ID',
141 |       post: 'Post',
142 |       position: 'Position'
143 |     }
144 |   }
145 | );
146 | 

147 |          

148 |       

149 | 
150 |       

151 |         

152 |           Visible field
153 |           サブ情報の表示カラムの設定
154 |         

155 |         

156 |           

157 |             
158 |               Sample
159 |               
160 |             
161 |           

162 |           
You can specify visible fields by show_field option which accepts comma separated text.

163 |           
カンマ区切りもできるshow_fieldオプションで表示フィールドを指定できます。

164 | 
165 | $('#foo').ajaxComboBox(
166 |   'jquery.ajax-combobox.php',
167 |   {
168 |     sub_info: true,
169 |     sub_as: {
170 |       post: 'Post',
171 |       position: 'Position'
172 |     },
173 |     show_field: 'position, post'
174 |   }
175 | );
176 | 
177 |          

178 |       

179 | 
180 |       

181 |         

182 |           Hidden field
183 |           サブ情報の非表示カラムの設定
184 |         

185 |         

186 |           

187 |             
188 |               Sample
189 |               
190 |             
191 |           

192 |           
You can specify hidden fields by hide_field option which accepts comma separated text.

193 |           
カンマ区切りもできるhide_fieldオプションで非表示フィールドを指定できます。

194 | 
195 | $('#foo').ajaxComboBox(
196 |   'jquery.ajax-combobox.php',
197 |   {
198 |     sub_info: true,
199 |     sub_as: {
200 |       post: 'Post',
201 |       position: 'Position'
202 |     },
203 |     hide_field: 'position, post'
204 |   }
205 | );
206 | 

207 |          

208 |       

209 | 
210 |       

211 |         

212 |           Simple
213 |           サブ情報の項目名を非表示にする
214 |         

215 |         

216 |           

217 |             
218 |               Sample
219 |               
220 |             
221 |           

222 |           
You can hide field column by setting 'simple' to sub_info option instead of true.

223 |           
sub_infoオプションにtrueの代わりに'simple'と指定することでサブ情報の項目名を非表示にできます。

224 | 
225 | $('#foo').ajaxComboBox(
226 |   'jquery.ajax-combobox.php',
227 |   {
228 |     sub_info: 'simple',
229 |     show_field: 'post'
230 |   }
231 | );
232 | 

233 |          

234 |       

235 | 
236 |       

237 |         

238 |           Divert
239 |           サブ情報を他で利用する
240 |         

241 |         

242 |           

243 |             
244 |               Sample
245 |               
246 |             
247 |           

248 |           

249 |             When you select from list, the custom attribute sub_info which contains sub info as JSON is added to the text box 

250 |             Then you can use Sub-info for other purpose.
251 |           

252 |           

253 |             候補を選択した際、テキストボックスのsub_infoという独自の属性にJSON形式でサブ情報が格納されるので、他で利用することが可能です。
254 |           

255 | 
256 | $('#foo').ajaxComboBox();
257 | 
258 | var json = $('#foo').attr('sub_info');
259 | 

260 |          

261 |       

262 |     

263 |   

264 | 

265 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | 
276 | 
277 | 
278 | 
279 | 


--------------------------------------------------------------------------------
/sample/text-area-basic/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Text area: Basic: jquery.ajax-combobox
 7 | 
 8 | 
13 | 
14 | 
15 | 
31 | 
32 | 
33 | 
Text area: Basic: jquery.ajax-combobox

34 | 

35 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/sample/text-area-complex/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Text area: Complex: jquery.ajax-combobox
 7 | 
 8 | 
13 | 
14 | 
15 | 
41 | 
42 | 
43 | 
Text area: Complex: jquery.ajax-combobox

44 | 

45 | 
52 | 

53 | 
54 | 


--------------------------------------------------------------------------------
/sample/text-area-js-object/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Text area: JS object: jquery.ajax-combobox
 7 | 
 8 | 
13 | 
14 | 
15 | 
52 | 
53 | 
54 | 
Text area: JS object: jquery.ajax-combobox

55 | 

56 | 
58 | 
59 | 


--------------------------------------------------------------------------------
/sample/text-area-multi-tag-pattern/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Text area: Multi tag pattern: jquery.ajax-combobox
 7 | 
 8 | 
13 | 
14 | 
15 | 
41 | 
42 | 
43 | 
Text area: Multi tag pattern: jquery.ajax-combobox

44 | 

45 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/sample/text-area-no-space/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Text area: No space: jquery.ajax-combobox
 7 | 
 8 | 
13 | 
14 | 
15 | 
32 | 
33 | 
34 | 
Text area: No space: jquery.ajax-combobox

35 | 

36 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/sample/text-area-options/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Text area: Options: jquery.ajax-combobox
 7 | 
 8 | 
13 | 
14 | 
15 | 
47 | 
48 | 
49 | 
Text area: Options: jquery.ajax-combobox

50 | 

51 | 
53 | 
54 | 


--------------------------------------------------------------------------------
/sample/usage/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | 
 6 | Usage: jquery.ajax-combobox
 7 | 
 8 | 
 9 | 
10 | 
21 | 
22 | 
23 | 
Usage: jquery.ajax-combobox

24 | 

25 |   

26 |   
27 |   

28 | 

29 | 
30 | 


--------------------------------------------------------------------------------
/sample/usage/send.php:
--------------------------------------------------------------------------------
1 | 

2 | Back


--------------------------------------------------------------------------------
/src/ajaxCombobox.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @class external:jQuery.ajaxComboBox
 3 |  * @classdesc 要素ごとに適用される処理を集めたクラス
 4 |  * @param {Object} combo_input - プラグインを適用するHTML要素。
 5 |  * @param {string|Object} source - サーバ側のプログラム、もしくは連想配列そのもの。
 6 |  * @param {Object} option - オプションを収めた連想配列。
 7 |  */
 8 | export default function (combo_input, source, option) {
 9 |   this.option = this._setOption(source, option);
10 |   this._setMessage();
11 |   this._setCssClass();
12 |   this._setProp();
13 |   this._setElem(combo_input);
14 | 
15 |   this._setButtonAttrDefault();
16 |   this._setInitRecord();
17 | 
18 |   this._ehButton();
19 |   this._ehComboInput();
20 |   this._ehWhole();
21 |   this._ehTextArea();
22 | 
23 |   if (this.option.shorten_btn) this._findUrlToShorten(this);
24 | }
25 | 


--------------------------------------------------------------------------------
/src/fn_ajaxCombobox.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @function external:"jQuery.fn".ajaxComboBox
 3 |  * @param {string|Object} source - サーバ側のプログラム、もしくは連想配列そのもの。
 4 |  * @param {Object} option - オプションを収めた連想配列。
 5 |  * @param {boolean} [option.instance] - プラグインを呼び出すとき、jQueryオブジェクトではなくインスタンスを返すかどうか
 6 |  * @param {string} [option.lang='en'] - Language used in this plugin's UI. ('en', 'es', 'pt-br' and 'ja')
 7 |  * @param {string} [option.db_table='tbl'] - 問い合わせるデータベースのテーブル。
 8 |  * @param {string} [option.field='name'] - JavaScript側での結果表示に用いるフィールド。
 9 |  * @param {string} [option.search_field=option.field] - 検索対象のフィールド名。カンマ区切りで複数指定可能。 (e.g.: 'id, name, job')
10 |  * @param {string|Array} [option.order_by=option.search_field] - 並替の基準となるフィールド。配列でも可。 (e.g.: 'name DESC' or ['name ASC', 'age DESC'])
11 |  * @param {number} [option.per_page=10] - 候補一覧の1ページあたりに表示する数。
12 |  * @param {number} [option.navi_num=5] - ページナビで表示する、隣接ページの数。
13 |  * @param {boolean} [option.navi_simple=false] - 先頭・末尾のページへのリンクを非表示にして、ComboBoxの幅をできるだけ狭くする。
14 |  * @param {string} [option.plugin_type='combobox'] - 'combobox', 'simple', 'textarea'
15 |  * @param {string} [option.init_record=false] - 初期値に指定するレコード。プライマリキーの値で指定する。 
16 |  * @param {string} [option.bind_to] - 候補選択後に実行されるイベントの名前
17 |  * @param {string} [option.and_or='AND'] - AND検索、もしくはOR検索 ('AND' or 'OR')
18 |  * @param {boolean|string} [option.sub_info=false] - サブ情報を表示。'simple'と指定することで項目名を非表示にできる。 (true, false or 'simple')
19 |  * @param {Object} [option.sub_as={}] - サブ情報のフィールドの別名。連想配列で指定する。
20 |  * @param {string} [option.show_field] - サブ情報で表示するフィールド。カンマ区切りで複数指定可能。 (e.g.: 'id' or 'id, job, age')
21 |  * @param {string} [option.hide_field] - サブ情報で非表示にするフィールド。カンマ区切りで複数指定可能。 (e.g.: 'id' or 'id, job, age')
22 |  * @param {boolean} [option.select_only=false] - セレクト専用にする。(データベースに登録された値しか受け入れない)
23 |  * @param {string} [option.primary_key='id'] - セレクト専用時、Form の hidden の値に指定される、レコードを特定できるフィールド。
24 |  * @param {string} [option.button_img=''] - ボタンに使われる画像
25 |  * @param {string} [option.shorten_btn] - (option.plugin_type='textarea' の場合に限り、)短縮実行ボタンのセレクタ。
26 |  * @param {string} [option.shorten_src='dist/bitly.php'] - URL短縮を外部に依頼するスクリプトのパス。
27 |  * @param {number} [option.shorten_min=20] - URL短縮を実行する最小の文字数。
28 |  * @param {Object} [option.shorten_reg] - URLを検出するための正規表現。
29 |  * @param {Array} [option.tags=false] - (option.plugin_type='textarea' の場合に限り、)タグ検索の設定。
30 |  * @param {Array} [option.tags.pattern] - タグを囲む記号。開始文字と終了文字を配列で指定する。 (e.g.: pattern: [ '<', '>' ])
31 |  * @param {Array} [option.tags.space] - タグ選択後に、前後に空白を挿入するかどうかを配列で指定する。
32 |  * @param {string} [option.tags.db_table=option.db_table]
33 |  * @param {string} [option.tags.field=option.field]
34 |  * @param {string} [option.tags.search_field=option.search_field]
35 |  * @param {string|Array} [option.tags.order_by=option.order_by]
36 |  * @param {boolean|string} [option.tags.sub_info=option.sub_info]
37 |  * @param {Object} [option.tags.sub_as=option.sub_as]
38 |  * @param {string} [option.tags.show_field=option.show_field]
39 |  * @param {string} [option.tags.hide_field=option.hide_field]
40 |  */
41 | /*global $*/
42 | export default function (source, option) {
43 |   var arr = [];
44 |   this.each(function() {
45 |     arr.push(new $.ajaxComboBox(this, source, option));
46 |   });
47 |   return (option !== undefined && option.instance !== undefined && option.instance) ? $(arr) : this;
48 | }
49 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /** @external "jQuery.fn" */
 2 | /*global $*/
 3 | import fn_ajaxComboBox from './fn_ajaxComboBox';
 4 | import ajaxComboBox    from './ajaxComboBox';
 5 | import m03             from './method/03-_setOption';
 6 | import m04             from './method/04-_setMessage';
 7 | import m05             from './method/05-_setCssClass';
 8 | import m06             from './method/06-_setElem';
 9 | import m07             from './method/07-_setInitRecord';
10 | import m08             from './method/08-_ehButton.js';
11 | import m10             from './method/10-_getShortURL.js';
12 | import m12             from './method/12-_scrollWindow.js';
13 | import m14             from './method/14-_setTimerCheckValue.js';
14 | import m16             from './method/16-_processKey.js';
15 | import m18             from './method/18-_suggest.js';
16 | import m20             from './method/20-_searchForDb.js';
17 | import m22             from './method/22-_searchForJson.js';
18 | import m24             from './method/24-_sortAsc.js';
19 | import m26             from './method/26-_prepareResults.js';
20 | import m28             from './method/28-_displayResults.js';
21 | import m30             from './method/30-_firstPage.js';
22 | import m32             from './method/32-_selectCurrentLine.js';
23 | import m34             from './method/34-_nextLine.js';
24 | 
25 | $.fn.ajaxComboBox = fn_ajaxComboBox;
26 | $.ajaxComboBox    = ajaxComboBox;
27 | $.extend(
28 |   $.ajaxComboBox.prototype,
29 |   m03,
30 |   m04,
31 |   m05,
32 |   m06,
33 |   m07,
34 |   m08,
35 |   m10,
36 |   m12,
37 |   m14,
38 |   m16,
39 |   m18,
40 |   m20,
41 |   m22,
42 |   m24,
43 |   m26,
44 |   m28,
45 |   m30,
46 |   m32,
47 |   m34
48 | );


--------------------------------------------------------------------------------
/src/method/03-_setOption.js:
--------------------------------------------------------------------------------
  1 | /*global $*/
  2 | /** @lends external:jQuery.ajaxComboBox.prototype */
  3 | export default {
  4 |   /**
  5 |    * Initialize options
  6 |    *
  7 |    * @private
  8 |    * @arg {string|object} source - Server side file such as PHP. Or, JS object which contains data.
  9 |    * @arg {object} option - Options sent by user.
 10 |    * @returns {object} Initialized options 
 11 |    */
 12 |   _setOption: function(source, option) {
 13 |     option = this._setOption1st(source, option);
 14 |     option = this._setOption2nd(option);
 15 |     return option;
 16 |   },
 17 | 
 18 |   /**
 19 |    * Initialize options (1st step)
 20 |    *
 21 |    * @private
 22 |    * @arg {string|object} source - Server side file such as PHP. Or, JS object which contains data.
 23 |    * @arg {object} option - Options sent by user.
 24 |    * @return {object} - Options at which the 1st step has ended.
 25 |    */
 26 |   _setOption1st: function(source, option) {
 27 |     return $.extend({
 28 |       // Basic
 29 |       source: source,
 30 |       lang: 'en',
 31 |       plugin_type: 'combobox',
 32 |       init_record: false,
 33 |       db_table: 'tbl',
 34 |       field: 'name',
 35 |       and_or: 'AND',
 36 |       per_page: 10,
 37 |       navi_num: 5,
 38 |       primary_key: 'id',
 39 |       button_img: '',
 40 |       bind_to: false,
 41 |       navi_simple: false,
 42 | 
 43 |       // Sub-info
 44 |       sub_info: false,
 45 |       sub_as: {},
 46 |       show_field: '',
 47 |       hide_field: '',
 48 | 
 49 |       // Select-only
 50 |       select_only: false,
 51 | 
 52 |       // Tags
 53 |       tags: false,
 54 | 
 55 |       // Shorten URL
 56 |       shorten_btn: false,
 57 |       shorten_src: 'dist/bitly.php',
 58 |       shorten_min: 20,
 59 |       shorten_reg: false
 60 |     }, option);
 61 |   },
 62 | 
 63 |   /**
 64 |    * Initialize options (2nd step)
 65 |    *
 66 |    * @private
 67 |    * @arg {object} option - Options at which the 1st step has ended.
 68 |    * @return {object} - Options at which the 2nd step has ended.
 69 |    */
 70 |   _setOption2nd: function(option) {
 71 |     // A field to search (allows comma separated)
 72 |     option.search_field = (option.search_field) ? option.search_field : option.field;
 73 | 
 74 |     // Unify with uppercase
 75 |     option.and_or = option.and_or.toUpperCase();
 76 | 
 77 |     // Split string into array by comma
 78 |     option.hide_field   = this._strToArray(option.hide_field);
 79 |     option.show_field   = this._strToArray(option.show_field);
 80 |     option.search_field = this._strToArray(option.search_field);
 81 | 
 82 |     // Show whole rest fields as sub info, if "show_field" is not set.
 83 |     if (option.show_field[0] === '') {
 84 |       option.show_field[0] = '*'
 85 |     }
 86 | 
 87 |     // "ORDER BY" after "CASE WHEN"
 88 |     option.order_by = (option.order_by === undefined) ?
 89 |       option.search_field :
 90 |       option.order_by;
 91 | 
 92 |     // Make order_by to multidimensional array
 93 |     // Example:  [ ['id', 'ASC'], ['name', 'DESC'] ]
 94 |     option.order_by = this._setOrderbyOption(option.order_by, option.field);
 95 | 
 96 |     // Text area
 97 |     if (option.plugin_type == 'textarea') {
 98 |       option.shorten_reg = this._setRegExpShort(option.shorten_reg, option.shorten_min);
 99 |     }
100 | 
101 |     // Tags
102 |     if (option.tags) {
103 |       option.tags = this._setTagPattern(option);
104 |     }
105 |     return option;
106 |   },
107 | 
108 |   /**
109 |    * Split string into array by comma.
110 |    *
111 |    * @private
112 |    * @arg {string} str - Comma separated string
113 |    * @return {array} Array splitted by comma
114 |    */
115 |   _strToArray: function(str) {
116 |     return str.replace(/[\s　]+/g, '').split(',');
117 |   },
118 | 
119 |   /**
120 |    * Create regex to search URL.
121 |    *
122 |    * @private
123 |    * @arg {object|boolean} shorten_reg - Regex object set by user. Or false.
124 |    * @return {object} - Regex object
125 |    */
126 |   _setRegExpShort: function(shorten_reg, shorten_min) {
127 |     // Use regex set by user if it exists
128 |     if (shorten_reg) return shorten_reg;
129 | 
130 |     var reg = '(?:^|[\\s|　\\[(<「『（【［＜〈《]+)';
131 |     reg += '(';
132 |     reg += 'https:\\/\\/[^\\s|　\\])>」』）】］＞〉》]{' + (shorten_min - 7) + ',}';
133 |     reg += '|';
134 |     reg += 'http:\\/\\/[^\\s|　\\])>」』）】］＞〉》]{'  + (shorten_min - 6) + ',}';
135 |     reg += '|';
136 |     reg += 'ftp:\\/\\/[^\\s|　\\])>」』）】］＞〉》]{'   + (shorten_min - 5) + ',}';
137 |     reg += ')';
138 |     return new RegExp(reg, 'g');
139 |   },
140 | 
141 |   /**
142 |    * Initialize options for tags.
143 |    *
144 |    * @private
145 |    * @arg {object} option - Options
146 |    * @return {object} - Options for tags
147 |    */
148 |   _setTagPattern: function(option) {
149 |     for (var i = 0; i < option.tags.length; i++) {
150 |       option.tags[i] = this._setTagOptions(option, i);
151 |       option.tags[i].pattern = this._setRegExpTag(option.tags[i].pattern, option.tags[i].space);
152 |     }
153 |     return option.tags;
154 |   },
155 | 
156 |   /**
157 |    * Initialize options (except for regex) for a tag.
158 |    *
159 |    * @private
160 |    * @arg {object} option - Options
161 |    * @arg {number} idx - Index of current selected tag
162 |    * @return {object} - Options (except for regex) of a tag
163 |    */
164 |   _setTagOptions: function(option, idx) {
165 |     option.tags[idx] = $.extend({
166 |       // Insert space
167 |       space: [true, true],
168 |       
169 |       // DB
170 |       db_table: option.db_table,
171 |       field: option.field,
172 |       search_field: option.search_field,
173 |       primary_key: option.primary_key,
174 | 
175 |       // Sub-info
176 |       sub_info: option.sub_info,
177 |       sub_as: option.sub_as,
178 |       show_field: option.show_field,
179 |       hide_field: option.hide_field
180 |     }, option.tags[idx]);
181 | 
182 |     // Convert comma separated options to array.
183 |     var arr = ['hide_field', 'show_field', 'search_field'];
184 |     for (var i = 0; i < arr.length; i++) {
185 |       if (typeof option.tags[idx][arr[i]] != 'object') {
186 |         option.tags[idx][arr[i]] = this._strToArray(option.tags[idx][arr[i]]);
187 |       }
188 |     }
189 | 
190 |     // Make order_by to array.
191 |     option.tags[idx].order_by = (option.tags[idx].order_by === undefined) ?
192 |       option.order_by :
193 |       this._setOrderbyOption(option.tags[idx].order_by, option.tags[idx].field);
194 | 
195 |     return option.tags[idx];
196 |   },
197 | 
198 |   /**
199 |    * Create regex to search tags.
200 |    *
201 |    * @private
202 |    * @arg {Array} pattern - Pair of start and end of tag
203 |    * @arg {Array} space - Pair of start and end of space
204 |    * @return {object} - Object of regexes
205 |    */
206 |   _setRegExpTag: function(pattern, space) {
207 |     // Escape for regex
208 |     var esc_left  = pattern[0].replace(/[\s\S]*/, this._escapeForReg);
209 |     var esc_right = pattern[1].replace(/[\s\S]*/, this._escapeForReg);
210 | 
211 |     return {
212 |       // Save original parentheses
213 |       left: pattern[0],
214 |       right: pattern[1],
215 | 
216 |       // Regex that extracts from the caret to the start of the tag in a string.
217 |       reg_left: new RegExp(esc_left + '((?:(?!' + esc_left + '|' + esc_right + ')[^\\s　])*)$'),
218 | 
219 |       // Regex that extracts from the caret to the end of the tag in a string.
220 |       reg_right: new RegExp('^((?:(?!' + esc_left + '|' + esc_right + ')[^\\s　])+)'),
221 | 
222 |       // Regex to decide whether to insert space before the start of tag after user select.
223 |       space_left: new RegExp('^' + esc_left + '$|[\\s　]+' + esc_left + '$'),
224 | 
225 |       // Regex to decide whether to insert space after the end of tag after user select.
226 |       space_right: new RegExp('^$|^[\\s　]+'),
227 | 
228 |       // Regex to decide whether to complement parentheses after user select.
229 |       comp_right: new RegExp('^' + esc_right)
230 |     };
231 |   },
232 | 
233 |   /**
234 |    * Callback function to escape for regex.
235 |    *
236 |    * @private
237 |    * @arg {string} text - The matched substring.
238 |    * @return {string} - Escaped string
239 |    */
240 |   _escapeForReg: function(text) {
241 |     return '\\u' + (0x10000 + text.charCodeAt(0)).toString(16).slice(1);
242 |   },
243 | 
244 |   /**
245 |    * Adjust an array of "ORDER BY" to use it in the code.
246 |    *
247 |    * @private
248 |    * @arg {Array|string} orders - Array of "ORDER BY" (not have processed).
249 |    * @arg {string} field - Field to search.
250 |    * @return {Array} - Array of "ORDER BY" (have processed).
251 |    */
252 |   _setOrderbyOption: function(orders, field) {
253 |     if (typeof orders == 'string') orders = new Array(orders);
254 | 
255 |     var result = [];
256 |     var arrSplit = [];
257 | 
258 |     for (var i = 0; i < orders.length; i++) {
259 |       arrSplit = $.trim(orders[i]).split(/ +/);
260 |       result[i] = (arrSplit.length == 2) ?
261 |         arrSplit :
262 |         (arrSplit[0].match(/^(ASC|DESC)$/i)) ? // In the future, lowercase "asc" or "desc" are judged to be field names.
263 |           [field, arrSplit[0]] :
264 |           [arrSplit[0], 'ASC'];
265 |     }
266 | 
267 |     return result;
268 |   }
269 | };


--------------------------------------------------------------------------------
/src/method/04-_setMessage.js:
--------------------------------------------------------------------------------
  1 | /*global $*/
  2 | /** @lends external:jQuery.ajaxComboBox.prototype */
  3 | export default {
  4 |   /**
  5 |    * @private
  6 |    * @desc プラグインの中で使うメッセージを設定する
  7 |    */
  8 |   _setMessage: function() {
  9 |     var message;
 10 |     switch (this.option.lang) {
 11 |       // German (Thanks Sebastian Gohres)
 12 |       case 'de':
 13 |         message = {
 14 |           add_btn     : 'Hinzufügen-Button',
 15 |           add_title   : 'Box hinzufügen',
 16 |           del_btn     : 'Löschen-Button',
 17 |           del_title   : 'Box löschen',
 18 |           next        : 'Nächsten',
 19 |           next_title  : 'Nächsten' + this.option.per_page + ' (Pfeil-rechts)',
 20 |           prev        : 'Vorherigen',
 21 |           prev_title  : 'Vorherigen' + this.option.per_page + ' (Pfeil-links)',
 22 |           first_title : 'Ersten (Umschalt + Pfeil-links)',
 23 |           last_title  : 'Letzten (Umschalt + Pfeil-rechts)',
 24 |           get_all_btn : 'alle (Pfeil-runter)',
 25 |           get_all_alt : '(Button)',
 26 |           close_btn   : 'Schließen (Tab)',
 27 |           close_alt   : '(Button)',
 28 |           loading     : 'lade...',
 29 |           loading_alt : '(lade)',
 30 |           page_info   : 'num_page_top - num_page_end von cnt_whole',
 31 |           select_ng   : 'Achtung: Bitte wählen Sie aus der Liste aus.',
 32 |           select_ok   : 'OK : Richtig ausgewählt.',
 33 |           not_found   : 'nicht gefunden',
 34 |           ajax_error  : 'Bei der Verbindung zum Server ist ein Fehler aufgetreten. (ajax-combobox)'
 35 |         };
 36 |         break;
 37 | 
 38 |       // English
 39 |       case 'en':
 40 |         message = {
 41 |           add_btn     : 'Add button',
 42 |           add_title   : 'add a box',
 43 |           del_btn     : 'Del button',
 44 |           del_title   : 'delete a box',
 45 |           next        : 'Next',
 46 |           next_title  : 'Next' + this.option.per_page + ' (Right key)',
 47 |           prev        : 'Prev',
 48 |           prev_title  : 'Prev' + this.option.per_page + ' (Left key)',
 49 |           first_title : 'First (Shift + Left key)',
 50 |           last_title  : 'Last (Shift + Right key)',
 51 |           get_all_btn : 'Get All (Down key)',
 52 |           get_all_alt : '(button)',
 53 |           close_btn   : 'Close (Tab key)',
 54 |           close_alt   : '(button)',
 55 |           loading     : 'loading...',
 56 |           loading_alt : '(loading)',
 57 |           page_info   : 'num_page_top - num_page_end of cnt_whole',
 58 |           select_ng   : 'Attention : Please choose from among the list.',
 59 |           select_ok   : 'OK : Correctly selected.',
 60 |           not_found   : 'not found',
 61 |           ajax_error  : 'An error occurred while connecting to server. (ajax-combobox)'
 62 |         };
 63 |         break;
 64 | 
 65 |       // Spanish (Thanks Joaquin G. de la Zerda)
 66 |       case 'es':
 67 |         message = {
 68 |           add_btn     : 'Agregar boton',
 69 |           add_title   : 'Agregar una opcion',
 70 |           del_btn     : 'Borrar boton',
 71 |           del_title   : 'Borrar una opcion',
 72 |           next        : 'Siguiente',
 73 |           next_title  : 'Proximas ' + this.option.per_page + ' (tecla derecha)',
 74 |           prev        : 'Anterior',
 75 |           prev_title  : 'Anteriores ' + this.option.per_page + ' (tecla izquierda)',
 76 |           first_title : 'Primera (Shift + Left)',
 77 |           last_title  : 'Ultima (Shift + Right)',
 78 |           get_all_btn : 'Ver todos (tecla abajo)',
 79 |           get_all_alt : '(boton)',
 80 |           close_btn   : 'Cerrar (tecla TAB)',
 81 |           close_alt   : '(boton)',
 82 |           loading     : 'Cargando...',
 83 |           loading_alt : '(Cargando)',
 84 |           page_info   : 'num_page_top - num_page_end de cnt_whole',
 85 |           select_ng   : 'Atencion: Elija una opcion de la lista.',
 86 |           select_ok   : 'OK: Correctamente seleccionado.',
 87 |           not_found   : 'no encuentre',
 88 |           ajax_error  : 'Un error ocurrió mientras conectando al servidor. (ajax-combobox)'
 89 |         };
 90 |         break;
 91 | 
 92 |       // Brazilian Portuguese (Thanks Marcio de Souza)
 93 |       case 'pt-br':
 94 |         message = {
 95 |           add_btn     : 'Adicionar botão',
 96 |           add_title   : 'Adicionar uma caixa',
 97 |           del_btn     : 'Apagar botão',
 98 |           del_title   : 'Apagar uma caixa',
 99 |           next        : 'Próxima',
100 |           next_title  : 'Próxima ' + this.option.per_page + ' (tecla direita)',
101 |           prev        : 'Anterior',
102 |           prev_title  : 'Anterior ' + this.option.per_page + ' (tecla esquerda)',
103 |           first_title : 'Primeira (Shift + Left)',
104 |           last_title  : 'Última (Shift + Right)',
105 |           get_all_btn : 'Ver todos (Seta para baixo)',
106 |           get_all_alt : '(botão)',
107 |           close_btn   : 'Fechar (tecla TAB)',
108 |           close_alt   : '(botão)',
109 |           loading     : 'Carregando...',
110 |           loading_alt : '(Carregando)',
111 |           page_info   : 'num_page_top - num_page_end de cnt_whole',
112 |           select_ng   : 'Atenção: Escolha uma opção da lista.',
113 |           select_ok   : 'OK: Selecionado Corretamente.',
114 |           not_found   : 'não encontrado',
115 |           ajax_error  : 'Um erro aconteceu enquanto conectando a servidor. (ajax-combobox)'
116 |         };
117 |         break;
118 | 
119 |       // Japanese (ja)
120 |       default:
121 |         message = {
122 |           add_btn     : '追加ボタン',
123 |           add_title   : '入力ボックスを追加します',
124 |           del_btn     : '削除ボタン',
125 |           del_title   : '入力ボックスを削除します',
126 |           next        : '次へ',
127 |           next_title  : '次の' + this.option.per_page + '件 (右キー)',
128 |           prev        : '前へ',
129 |           prev_title  : '前の' + this.option.per_page + '件 (左キー)',
130 |           first_title : '最初のページへ (Shift + 左キー)',
131 |           last_title  : '最後のページへ (Shift + 右キー)',
132 |           get_all_btn : '全件取得 (下キー)',
133 |           get_all_alt : '画像:ボタン',
134 |           close_btn   : '閉じる (Tabキー)',
135 |           close_alt   : '画像:ボタン',
136 |           loading     : '読み込み中...',
137 |           loading_alt : '画像:読み込み中...',
138 |           page_info   : 'num_page_top - num_page_end 件 (全 cnt_whole 件)',
139 |           select_ng   : '注意 : リストの中から選択してください',
140 |           select_ok   : 'OK : 正しく選択されました。',
141 |           not_found   : '(0 件)',
142 |           ajax_error  : 'サーバとの通信でエラーが発生しました。(ajax-combobox)'
143 |         };
144 |     }
145 |     this.message = message;
146 |   },
147 | };


--------------------------------------------------------------------------------
/src/method/05-_setCssClass.js:
--------------------------------------------------------------------------------
 1 | /*global $*/
 2 | /** @lends external:jQuery.ajaxComboBox.prototype */
 3 | export default {
 4 |   /**
 5 |    * @private
 6 |    * @desc CSSクラスの名前を設定する
 7 |    */
 8 |   _setCssClass: function() {
 9 |     // 各モード共通
10 |     var css_class = {
11 |       container      : 'ac_container', // ComboBoxを包むdivタグ
12 |       container_open : 'ac_container_open',
13 |       selected       : 'ac_selected',
14 |       re_area        : 'ac_result_area', // 結果リストの

15 |       navi           : 'ac_navi', // ページナビを囲む

16 |       results        : 'ac_results', // 候補一覧を囲む