Skip to content

Custom dropdown format added and dropdownFormat #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
122 changes: 104 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Lightweight AJAX autocomplete for Bootstrap

* [jQuery](https://jquery.com/download/)
* [Bootstrap 3](http://getbootstrap.com/)

* [Bootstrap 4](http://getbootstrap.com/)

## Usage

Expand All @@ -31,23 +31,109 @@ $('#input').bootcomplete({url:'/search.php',options});
]
```

## Options

* **url:** The url to submit query

* **method:** Request method (get, post)

* **wrapperClass:** CSS Class used for the element wrapper

* **menuClass:** CSS Class used for the suggestions menu

* **idField:** Include hidden input field for selected option id (true,false) Default: true

* **idFieldName:** Hidden input field name. Default: elementName_id
### Custom Dropdown
You can set a custom format for each option of the dropdown with dropdownFormat option:

* **minLength:** Minimum string length before sending query request

* **dataParams:** Send additional data parameters with request. Usage: ```dataParams: {keyName : value}```
```javascript
var options = {
url: 'someURL',
dropdownFormat: function( j ){
return '<a href="#" class="list-group-item" data-id="' + j.id + '"> <img src="'+ j.logo +'" width="50px" height="50px"/> ' + j.label +'</a>'
}
}

$('input[name=autocomplete]').bootcomplete(options)
```

* **formParams:** Send chained form parameters with request. Usage: ```formParams: {keyName : $('#formElement')}```
#### Serverside JSON Response Object
```php
[
{
"id": "1",
"label": "My Custom Option",
"logo": "http:\/\/url\/web\/uploads\/avatars\/avatar-custom.png"
}
]
```

## Options
<table>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>url</td>
<td>string</td>
<td>null</td>
<td>The url to submit query</td>
</tr>
<tr>
<td>method</td>
<td>string</td>
<td>GET</td>
<td>Request method (get, post)</td>
</tr>
<tr>
<td>wrapperClass</td>
<td>string</td>
<td>null</td>
<td>CSS Class used for the element wrapper</td>
</tr>
<tr>
<td>menuClass</td>
<td>string</td>
<td>null</td>
<td>CSS Class used for the suggestions menu</td>
</tr>
<tr>
<td>idField</td>
<td>string</td>
<td>null</td>
<td>Include hidden input field for selected option id (true,false) Default: true</td>
</tr>
<tr>
<td>idFieldName</td>
<td>string</td>
<td>null</td>
<td>Hidden input field name. Default: elementName_id</td>
</tr>
<tr>
<td>minLength</td>
<td>int</td>
<td>null</td>
<td>Minimum string length before sending query request</td>
</tr>
<tr>
<td>dataParams</td>
<td>json</td>
<td>null</td>
<td>Send additional data parameters with request. Usage: <pre>dataParams: {keyName : value}</pre></td>
</tr>
<tr>
<td>formParams</td>
<td>jQuery Object</td>
<td>null</td>
<td>Send chained form parameters with request. Usage: <pre>formParams: {keyName : $('#formElement')}</pre></td>
</tr>
<tr>
<td>beforeSelect</td>
<td>function</td>
<td>null</td>
<td>Callback, triggers before the population of dropdown list. Usage: <pre>beforeSelect: function(){ alert('try me') }</pre></td>
</tr>
<tr>
<td>afterSelect</td>
<td>Function</td>
<td>null</td>
<td>Callback, triggers after select an option from the dropdown list. Usage: <pre>afterSelect: function(id, value) { alert('try me after') }</pre></td>
</tr>
<tr>
<td>dropdownFormat</td>
<td>Function</td>
<td>null</td>
<td>Callback, returns a custom format for the dropdown list. Usage: <pre>dropdownFormat: function( j ) { return '<a data-id="'+ j.id +'" class="my-custom-option">'+ j.label + ' - ' + j.someExtraTextFromTheServerJSON +'</a>' }</td>
</tr>
</table>
25 changes: 23 additions & 2 deletions dist/jquery.bootcomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
* @version 1.0
* @license MIT License
*
* @forked Renan Díaz | https://reandimo.site/
*
*/
(function ( $ ) {

Expand All @@ -19,7 +21,10 @@
idFieldName : $(this).attr('name')+"_id",
minLength : 3,
dataParams : {},
formParams : {}
formParams : {},
beforeSelect : function() {},
afterSelect : function(id, value) {},
dropdownFormat : null
}

var settings = $.extend( {}, defaults, options );
Expand Down Expand Up @@ -51,6 +56,9 @@

function searchQuery(){

//beforeSelect Function
settings.beforeSelect.call(this);

var arr = [];
$.each(settings.formParams,function(k,v){
arr[k]=$(v).val()
Expand All @@ -77,7 +85,13 @@
success: function( json ) {
var results = ''
$.each( json, function(i, j) {
results += '<a href="#" class="list-group-item" data-id="'+j.id+'" data-label="'+j.label+'">'+j.label+'</a>'
//Check if custom format is set
if (settings.dropdownFormat !== '' && settings.dropdownFormat !== undefined && settings.dropdownFormat !== null) {
results += settings.dropdownFormat.call(this, j);
}else{
results += '<a href="#" class="list-group-item" data-id="'+j.id+'" data-label="'+j.label+'">'+j.label+'</a>'
}

});

$(that).next('.'+settings.menuClass).html(results)
Expand Down Expand Up @@ -106,6 +120,13 @@
}
}
$(that).next('.' + settings.menuClass).hide();

var id = $(this).data('id'),
value = $(this).data('label');

//afterSelect Function
settings.afterSelect.call(this, id, value);

return false;
}

Expand Down