Skip to content

Commit f7d8d04

Browse files
TarekRaafatTarekRaafat
committed
v10.2.6 => Release Notes for details, resolve #158 
1 parent 6f98e16 commit f7d8d04

18 files changed

+150
-87
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,13 @@ autoComplete.js is a simple, pure vanilla Javascript library progressively desig
5151
`JS`
5252

5353
```html
54-
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/autoComplete.min.js"></script>
54+
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
5555
```
5656

5757
`CSS`
5858

5959
```html
60-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/css/autoComplete.min.css">
60+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
6161
```
6262
#### Package Manager
6363

‎dist/autoComplete.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -419,12 +419,10 @@
419419
}
420420
};
421421
var next = function next(ctx) {
422-
var index = ctx.cursor + 1;
423-
goTo(index, ctx);
422+
goTo(ctx.cursor + 1, ctx);
424423
};
425424
var previous = function previous(ctx) {
426-
var index = ctx.cursor - 1;
427-
goTo(index, ctx);
425+
goTo(ctx.cursor - 1, ctx);
428426
};
429427
var select = function select(ctx, event, index) {
430428
index = index >= 0 ? index : ctx.cursor;
@@ -439,8 +437,7 @@
439437
var items = Array.from(ctx.list.querySelectorAll(itemTag));
440438
var item = event.target.closest(itemTag);
441439
if (item && item.nodeName === itemTag) {
442-
var index = items.indexOf(item);
443-
select(ctx, event, index);
440+
select(ctx, event, items.indexOf(item));
444441
}
445442
};
446443
var navigate = function navigate(event, ctx) {
@@ -627,7 +624,7 @@
627624
prototype.select = function (index) {
628625
select(this, null, index);
629626
};
630-
autoComplete.search = prototype.search = function (query, record, options) {
627+
prototype.search = function (query, record, options) {
631628
return search(query, record, options);
632629
};
633630
}

‎dist/autoComplete.js.gz

-14 Bytes
Binary file not shown.

‎dist/autoComplete.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/autoComplete.min.js.gz

-7 Bytes
Binary file not shown.

‎docs/configuration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ wrapper: false,
7777

7878
#### `src` <sub><sup>(required)</sup></sub>
7979
- Type: `Array`|`Function` returns `Array` of results values
80-
- Parameters: (`query`)
80+
- Parameters: (`query`) <small>(works only if `data.cache` is `false`)</small>
8181
- Default: `null`
8282

8383
#### `keys` <sub><sup>(required)</sup></sub>

‎docs/demo/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
7373
<meta name="theme-color" content="#ffffff">
7474
<link rel="stylesheet" type="text/css" media="screen"
75-
href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/css/autoComplete.min.css">
75+
href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
7676
<!-- <link rel="stylesheet" type="text/css" media="screen" href="./css/autoComplete.css"> -->
7777
<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
7878
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
@@ -150,7 +150,7 @@ <h4>mode</h4>
150150
</div>
151151
</footer>
152152
</div>
153-
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/autoComplete.min.js"></script>
153+
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
154154
<!-- <script src="./js/autoComplete.js"></script> -->
155155
<script src="./js/index.js"></script>
156156
</body>

‎docs/demo/js/autoComplete.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -419,12 +419,10 @@
419419
}
420420
};
421421
var next = function next(ctx) {
422-
var index = ctx.cursor + 1;
423-
goTo(index, ctx);
422+
goTo(ctx.cursor + 1, ctx);
424423
};
425424
var previous = function previous(ctx) {
426-
var index = ctx.cursor - 1;
427-
goTo(index, ctx);
425+
goTo(ctx.cursor - 1, ctx);
428426
};
429427
var select = function select(ctx, event, index) {
430428
index = index >= 0 ? index : ctx.cursor;
@@ -439,8 +437,7 @@
439437
var items = Array.from(ctx.list.querySelectorAll(itemTag));
440438
var item = event.target.closest(itemTag);
441439
if (item && item.nodeName === itemTag) {
442-
var index = items.indexOf(item);
443-
select(ctx, event, index);
440+
select(ctx, event, items.indexOf(item));
444441
}
445442
};
446443
var navigate = function navigate(event, ctx) {
@@ -627,7 +624,7 @@
627624
prototype.select = function (index) {
628625
select(this, null, index);
629626
};
630-
autoComplete.search = prototype.search = function (query, record, options) {
627+
prototype.search = function (query, record, options) {
631628
return search(query, record, options);
632629
};
633630
}

‎docs/demo/js/autoComplete.js.gz

-14 Bytes
Binary file not shown.

‎docs/demo/js/autoComplete.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo/js/autoComplete.min.js.gz

-7 Bytes
Binary file not shown.

‎docs/how-to-guides.md

Lines changed: 82 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Guided examples on how-to use autoComplete.js in different use-cases
1515
events: {
1616
input: {
1717
focus() {
18-
const inputValue = document.querySelector("#autoComplete").value;
18+
const inputValue = autoCompleteJS.input.value;
1919

2020
if (inputValue.length) autoCompleteJS.start();
2121
},
@@ -33,6 +33,42 @@ events: {
3333

3434
***
3535

36+
## `Dynamic list position`
37+
38+
<!-- panels:start -->
39+
<!-- div:left-panel -->
40+
41+
##### Code:
42+
43+
```js
44+
// autoComplete.js Config Options
45+
events: {
46+
input: {
47+
open() {
48+
const position =
49+
autoCompleteJS.input.getBoundingClientRect().bottom + autoCompleteJS.list.getBoundingClientRect().height >
50+
(window.innerHeight || document.documentElement.clientHeight);
51+
52+
if (position) {
53+
autoCompleteJS.list.style.bottom = autoCompleteJS.input.offsetHeight + 8 + "px";
54+
} else {
55+
autoCompleteJS.list.style.bottom = -autoCompleteJS.list.offsetHeight - 8 + "px";
56+
}
57+
},
58+
},
59+
},
60+
```
61+
62+
<!-- div:right-panel -->
63+
64+
##### Example
65+
66+
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_02">
67+
68+
<!-- panels:end -->
69+
70+
***
71+
3672
## `No Results Found`
3773

3874
<!-- panels:start -->
@@ -62,7 +98,7 @@ resultsList: {
6298

6399
##### Example
64100

65-
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_02">
101+
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_03">
66102

67103
<!-- panels:end -->
68104

@@ -90,7 +126,7 @@ events: {
90126
input: {
91127
selection(event) {
92128
const feedback = event.detail;
93-
const input = document.querySelector("#autoComplete");
129+
const input = autoCompleteJS.input;
94130
// Trim selected Value
95131
const selection = feedback.selection.value.trim();
96132
// Split query into array and trim each value
@@ -110,7 +146,7 @@ events: {
110146

111147
##### Example:
112148

113-
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_03">
149+
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_04">
114150

115151
<!-- panels:end -->
116152

@@ -158,7 +194,7 @@ events: {
158194
input: {
159195
selection(event) {
160196
const feedback = event.detail;
161-
const input = document.querySelector("#autoComplete");
197+
const input = autoCompleteJS.input;
162198
// Get selected Value
163199
const selection = feedback.selection.value.trim();
164200
// Add selected value to "history" array
@@ -172,7 +208,7 @@ events: {
172208

173209
##### Example:
174210

175-
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_04">
211+
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_05">
176212

177213
<!-- panels:end -->
178214

@@ -188,7 +224,7 @@ events: {
188224
// autoComplete.js Config Options
189225
filter: (list) => {
190226
const results = list.filter((item) => {
191-
const inputValue = document.querySelector("#autoComplete").value.toLowerCase();
227+
const inputValue = autoCompleteJS.input.value.toLowerCase();
192228
const itemValue = item.value.toLowerCase();
193229

194230
if (itemValue.startsWith(inputValue)) {
@@ -204,7 +240,7 @@ filter: (list) => {
204240

205241
##### Example:
206242

207-
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_05">
243+
<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_06">
208244

209245
<!-- panels:end -->
210246

@@ -258,18 +294,45 @@ filter: (list) => {
258294
resultItem,
259295
events: {
260296
input: {
297+
open() {
298+
const position =
299+
autoCompleteJS_02.input.getBoundingClientRect().bottom + autoCompleteJS_02.list.getBoundingClientRect().height >
300+
(window.innerHeight || document.documentElement.clientHeight);
301+
302+
if (position) {
303+
autoCompleteJS_02.list.style.bottom = autoCompleteJS_02.input.offsetHeight + 8 + "px";
304+
} else {
305+
autoCompleteJS_02.list.style.bottom = -autoCompleteJS_02.list.offsetHeight - 8 + "px";
306+
}
307+
},
261308
selection(event) {
262309
const selection = event.detail.selection.value;
263310
autoCompleteJS_02.input.value = selection;
264311
}
265-
}
266-
}
312+
},
313+
},
267314
});
268315

269316
const autoCompleteJS_03 = new autoComplete({
270317
selector: "#autoComplete_03",
271318
placeHolder,
272319
data,
320+
resultsList,
321+
resultItem,
322+
events: {
323+
input: {
324+
selection(event) {
325+
const selection = event.detail.selection.value;
326+
autoCompleteJS_03.input.value = selection;
327+
}
328+
}
329+
}
330+
});
331+
332+
const autoCompleteJS_04 = new autoComplete({
333+
selector: "#autoComplete_04",
334+
placeHolder,
335+
data,
273336
query(query) {
274337
// Split query into array
275338
const querySplit = query.split(",");
@@ -286,7 +349,7 @@ filter: (list) => {
286349
input: {
287350
selection(event) {
288351
const feedback = event.detail;
289-
const input = autoCompleteJS_03.input;
352+
const input = autoCompleteJS_04.input;
290353
// Trim selected Value
291354
const selection = feedback.selection.value.trim();
292355
// Split query into array and trim each value
@@ -304,8 +367,8 @@ filter: (list) => {
304367

305368
let history = [];
306369

307-
const autoCompleteJS_04 = new autoComplete({
308-
selector: "#autoComplete_04",
370+
const autoCompleteJS_05 = new autoComplete({
371+
selector: "#autoComplete_05",
309372
placeHolder,
310373
data,
311374
resultsList: {
@@ -338,26 +401,26 @@ filter: (list) => {
338401
input: {
339402
selection(event) {
340403
const feedback = event.detail;
341-
const input = autoCompleteJS_04.input;
404+
const input = autoCompleteJS_05.input;
342405
// Get selected Value
343406
const selection = feedback.selection.value;
344407
// Add selected value to "history" array
345408
history.push(selection);
346409

347-
autoCompleteJS_04.input.value = selection;
410+
autoCompleteJS_05.input.value = selection;
348411
}
349412
}
350413
}
351414
});
352415

353-
const autoCompleteJS_05 = new autoComplete({
354-
selector: "#autoComplete_05",
416+
const autoCompleteJS_06 = new autoComplete({
417+
selector: "#autoComplete_06",
355418
placeHolder,
356419
data: {
357420
...data,
358421
filter(list) {
359422
const results = list.filter((item) => {
360-
const inputValue = document.querySelector("#autoComplete_05").value.toLowerCase();
423+
const inputValue = document.querySelector("#autoComplete_06").value.toLowerCase();
361424
const itemValue = item.value.toLowerCase();
362425

363426
if (itemValue.startsWith(inputValue)) {
@@ -374,7 +437,7 @@ filter: (list) => {
374437
input: {
375438
selection(event) {
376439
const selection = event.detail.selection.value;
377-
autoCompleteJS_05.input.value = selection;
440+
autoCompleteJS_06.input.value = selection;
378441
}
379442
}
380443
}

‎docs/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@
158158
src="//platform-api.sharethis.com/js/sharethis.js#property=5c213660c276020011d38212&product=inline-share-buttons"
159159
async="async"></script>
160160
<link rel="stylesheet"
161-
href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/css/autoComplete.min.css">
161+
href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
162162
</head>
163163

164164
<body>
@@ -209,7 +209,7 @@
209209
mustache: {
210210
data: ["../package.json", {
211211
minVersion: "10.2",
212-
version: "10.2.5"
212+
version: "10.2.6"
213213
}]
214214
}
215215
}
@@ -224,7 +224,7 @@
224224
<script src="https://cdn.jsdelivr.net/npm/docsify-example-panels"></script>
225225
<script src="//cdn.jsdelivr.net/npm/codeblock-iframe@latest/dist/index.min.js"></script>
226226
<script src="//cdn.jsdelivr.net/npm/docsify-codeblock-iframe@latest/dist/index.min.js"></script>
227-
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/autoComplete.min.js"></script>
227+
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
228228
</body>
229229

230230
</html>

‎docs/release-notes.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,17 @@ For more information on semantic versioning, please visit <http://semver.org/>.
3535

3636
***
3737

38-
### v10.2.5 ✨
38+
### v10.2.6 ✨
39+
- ➕ Added:
40+
- New `How-to Guides` example for `Dynamic list position` based on it's position inside viewport [#158]
41+
- 🎛️ Updated:
42+
- Library code with minor cleanup & optimizations resulted in minor size reduction for faster loading time
43+
- `Configuration` documentation section
44+
- Development dependencies
45+
- 🧹 Removed:
46+
- `autoComplete.search()` API method to be only available per `autoComplete.js` instance instead of global
47+
48+
### v10.2.5
3949
- 🔧 Fixed: `response` eventEmitter not firing in `data.cache` mode
4050

4151
### v10.2.4

0 commit comments

Comments
 (0)