Skip to content

Commit

Permalink
Add additional option and event
Browse files Browse the repository at this point in the history 
- Add option onPick and onItemRendered
- Add event (pick|itemrender).bs.autocomplete
  • Loading branch information
@iqbalfn
iqbalfn committed Jan 13, 2021
1 parent 86df29b commit 3a9f564
Show file tree
Hide file tree
Showing 11 changed files with 3,886 additions and 947 deletions.
2 changes: 1 addition & 1 deletion build/banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const year = new Date().getFullYear()

function getBanner(pluginFilename) {
return `/*!
* Bootstrap Autocomplete v0.1.1 (https://iqbalfn.github.io/bootstrap-autocomplete/)
* Bootstrap Autocomplete v0.2.0 (https://iqbalfn.github.io/bootstrap-autocomplete/)
* Copyright 2019 Iqbal Fauzi
* Licensed under MIT (https://github.com/iqbalfn/bootstrap-autocomplete/blob/master/LICENSE)
*/`
Expand Down
50 changes: 36 additions & 14 deletions dist/js/bootstrap-autocomplete.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/js/bootstrap-autocomplete.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/js/bootstrap-autocomplete.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/bootstrap-autocomplete.min.js.map
View file

Large diffs are not rendered by default.

123 changes: 118 additions & 5 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h2>Examples</h2>
<section>
<h3>List Source</h3>
<article>
<p>Below autocomplete take source from datalist.</p>
<p>List of autocomplete suggestion can be taken from <code>datalist</code> element ase below:</p>
<div class="example">
<div class="example-preview source-code" data-hl="html">
<div class="form-group">
Expand Down Expand Up @@ -101,7 +101,8 @@ <h3>List Source</h3>
<section>
<h3>Ajax Prefect</h3>
<article>
<p>The data below taken from prefect of some URL.</p>
<p>The suggestions text can also be prefect during initialize time. This method will call ajax request once in the render time. This method is better if suggestions text is
not too many</p>
<div class="example">
<div class="example-preview source-code" data-hl="html">
<div class="form-group">
Expand All @@ -122,7 +123,7 @@ <h3>Ajax Prefect</h3>
<section>
<h3>Ajax Source</h3>
<article>
<p>Below autocomplete take source from ajax on user typing.</p>
<p>Suggestion text taken during user typing. This method is good for datalist that is too much for single request.</p>
<div class="example">
<div class="example-preview source-code" data-hl="html">
<div class="form-group">
Expand All @@ -143,7 +144,7 @@ <h3>Ajax Source</h3>
<section>
<h3>Ajax Source ( With Relation )</h3>
<article>
<p>Below autocomplete take source from ajax on user typing, and with additional query string based on other input.</p>
<p>Add additional query string to ajax request during user typing by adding option <code>filterRelation</code></p>
<div class="example">
<div class="example-preview source-code" data-hl="html">
<div class="form-group">
Expand Down Expand Up @@ -178,6 +179,72 @@ <h3>Ajax Source ( With Relation )</h3>
</div>
</article>
</section>

<section>
<h3>On Render Item</h3>
<article>
<p>Right after a suggestion item element already rendered and is already on view, event `itemrender.bs.autocomplete` will be called that get two parameters, element, and rendered item.</code></p>
<div class="example">
<div class="example-preview source-code" data-hl="html">
<div class="form-group">
<label for="input-url3">Timezone</label>
<input type="text"
class="form-control"
placeholder="Timezone"
id="input-url3"
data-filter="https://iqbalfn.com/timezone/?q=#QUERY#">
</div>

<script>
document.addEventListener('DOMContentLoaded', e => {
$('#input-url3').autocomplete({
onItemRendered(el, item) {
console.log('option', item)
}
})
$('#input-url3').on('itemrender.bs.autocomplete', e => {
let item = e.item
console.log('event', item)
})
}, false);
</script>
</div>
</div>
</article>
</section>

<section>
<h3>Pick Item</h3>
<article>
<p>Right after user pick an option, event `pick.bs.autocomplete` will be called that get two parameters, element, and picked element.</p>
<div class="example">
<div class="example-preview source-code" data-hl="html">
<div class="form-group">
<label for="input-url4">Timezone</label>
<input type="text"
class="form-control"
placeholder="Timezone"
id="input-url4"
data-filter="https://iqbalfn.com/timezone/?q=#QUERY#">
</div>

<script>
document.addEventListener('DOMContentLoaded', e => {
$('#input-url4').autocomplete({
onPick(el, item) {
console.log('option', item)
}
})
$('#input-url4').on('pick.bs.autocomplete', e => {
let item = e.item
console.log('event', item)
})
}, false);
</script>
</div>
</div>
</article>
</section>
</article>
</section>

Expand Down Expand Up @@ -263,6 +330,18 @@ <h3>Options</h3>
<td>10</td>
<td>Total result to show on dropdown list.</td>
</tr>
<tr>
<td>onPick</td>
<td>function</td>
<td>null</td>
<td>Function to call after user picking the dropdown item. <code>onPick(input, item)</code></td>
</tr>
<tr>
<td>onItemRendered</td>
<td>function</td>
<td>null</td>
<td>Function to call right after item element rendered. <code>onItemRendered(input, item)</code>.</td>
</tr>
<tr>
<td>preProcess</td>
<td>function</td>
Expand All @@ -274,6 +353,40 @@ <h3>Options</h3>
</article>
</section>

<section>
<h3>Events</h3>
<article>
<p>Bootstrap autocomplete exposes a few events for hooking into suggestion functionality. All sugggestions events are fired at the input element itself.</p>

<table class="table table-striped table-bordered">
<thead>
<tr><th>Event Type</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>pick.bs.autocomplete</td>
<td>This event fires immediately when user selecting any of suggestions option item.</td>
</tr>
<tr>
<td>itemrender.bs.autocomplete</td>
<td>An event that called right after suggestion item already rendered and is on view.</td>
</tr>
</tbody>
</table>

<div class="example">
<div class="example-preview source-code no-html" data-hl="js">
$('#input-url').on('pick.bs.autocomplete', function(el, item){
// ...
})
$('#input-url').on('itemrender.bs.autocomplete', function(el, item){
// ...
})
</div>
</div>
</article>
</section>

</div>
</div>
</div>
Expand All @@ -288,4 +401,4 @@ <h3>Options</h3>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/bootstrap-autocomplete.js"></script>
</body>
</html>
</html>
Loading

0 comments on commit 3a9f564

Please sign in to comment.