Skip to content

Commit

Permalink
Add Autocomplete method buildingListMode parameter
Browse files Browse the repository at this point in the history 
Update JS library version
  • Loading branch information
@JozefVerhoef
JozefVerhoef committed Oct 28, 2024
1 parent 98b85a5 commit 3c969ef
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 58 deletions.
133 changes: 81 additions & 52 deletions example/assets/AutocompleteAddress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* https://www.tldrlegal.com/license/apple-mit-license-aml
*
* @author Postcode.nl
* @version 1.4.0
* @version 1.4.1
*/

(function (global, factory) {
Expand All @@ -31,7 +31,7 @@
const document = window.document,
$ = function (selector) { return document.querySelectorAll(selector); },
elementData = new WeakMap(),
VERSION = '1.4.0',
VERSION = '1.4.1',
EVENT_NAMESPACE = 'autocomplete-',
PRECISION_ADDRESS = 'Address',
KEY_ESC = 'Escape',
Expand All @@ -42,6 +42,7 @@
KEY_UP_LEGACY = 'Up',
KEY_DOWN = 'ArrowDown',
KEY_DOWN_LEGACY = 'Down',
BUILDING_LIST_MODES = { PAGED: 'paged', SHORT: 'short' },

/**
* Default options.
Expand Down Expand Up @@ -185,6 +186,27 @@
writable: true,
},

/**
* Set mode for listing buildings in `Street` context. Supported modes:
*
* - 'paged': get a larger list of building results (actual number determined by API). Includes link to view more buildings.
* - 'short': building results are limited to the first few items, similar to matches in other contexts.
*/
buildingListMode: {
set (mode) {
if (Object.values(BUILDING_LIST_MODES).includes(mode))
{
this.mode = mode;
}
else
{
console.error('Invalid mode for option buildingListMode:', mode);
}
},
get () {
return this.mode || BUILDING_LIST_MODES.SHORT;
},
},
});

/**
Expand Down Expand Up @@ -235,8 +257,6 @@
return;
}

removeItemFocus();

setValue = setValue || false;
isRelative = isRelative || false;

Expand Down Expand Up @@ -265,24 +285,13 @@
&& (index > 0 && toIndex < fromIndex || index < 0 && toIndex > fromIndex) // Wrapping
)
{
item = null;
setActiveItem(null);
inputElement.value = inputValue;
elementData.get(inputElement).context = inputContext;
return;
}

item = ul.children[toIndex];
item.classList.add(classNames.itemFocus);

// Scroll the menu item into view if needed.
if (ul.scrollTop > item.offsetTop)
{
ul.scrollTop = item.offsetTop;
}
else if ((item.offsetHeight + item.offsetTop) > ul.clientHeight)
{
ul.scrollTop = (item.offsetHeight + item.offsetTop) - ul.clientHeight;
}
setActiveItem(ul.children[toIndex]);

const data = elementData.get(item);

Expand All @@ -297,6 +306,16 @@
inputElement.value = data.value;
elementData.get(inputElement).context = data.context;
selectedIndex = toIndex;

// Scroll the menu item into view if needed.
if (ul.scrollTop > item.offsetTop)
{
ul.scrollTop = item.offsetTop;
}
else if (item.offsetTop >= (ul.clientHeight + ul.scrollTop))
{
ul.scrollTop = (item.offsetHeight + item.offsetTop) - ul.clientHeight;
}
}
},

Expand All @@ -308,6 +327,20 @@
return Array.prototype.indexOf.call(ul.children, element);
},

/**
* Set and focus active item. Removes focus from previous item.
*/
setActiveItem = function (newItem)
{
removeItemFocus();

item = newItem;
if (item)
{
item.classList.add(classNames.itemFocus);
}
},

/**
* Remove the item focus CSS class from the active item, if any.
*/
Expand Down Expand Up @@ -391,26 +424,15 @@
return;
}

removeItemFocus();

let target = e.target;

while (target.parentElement !== ul)
{
target = target.parentElement;
}

item = target;
item.classList.add(classNames.itemFocus);
});

ul.addEventListener('mouseout', function () {
self.blur();

if (selectedIndex !== null)
{
moveItemFocus(selectedIndex);
}
setActiveItem(target);
moveItemFocus(indexOf(target));
});

wrapper.addEventListener('mousedown', function () {
Expand Down Expand Up @@ -448,16 +470,16 @@
this.setItems = function (matches, renderItem)
{
ul.innerHTML = '';
ul.scrollTop = 0;

for (let i = 0, li, match; (match = matches[i++]);)
{
li = renderItem(ul, match);
elementData.set(li, match);
}

item = null;
setActiveItem(null);
selectedIndex = null;
ul.scrollTop = 0;
}

/**
Expand Down Expand Up @@ -533,8 +555,7 @@
*/
this.blur = function ()
{
removeItemFocus();
item = null;
setActiveItem(null);
}

/**
Expand Down Expand Up @@ -572,8 +593,7 @@
*/
this.clear = function ()
{
removeItemFocus();
item = null;
setActiveItem(null);
selectedIndex = null;
ul.innerHTML = '';
}
Expand Down Expand Up @@ -878,14 +898,23 @@
*/
this.getSuggestions = function (context, term, response)
{
let url = this.options.autocompleteUrl + '/' + encodeURIComponent(context) + '/' + encodeURIComponent(term);

if (typeof options.language !== 'undefined')
const url = [
this.options.autocompleteUrl,
encodeURIComponent(context),
encodeURIComponent(term),
options.language || '',
];

if (options.buildingListMode !== BUILDING_LIST_MODES.SHORT)
{
url += '/' + options.language;
// Only specify when not the API default, for better compatibility with client proxies
url.push(options.buildingListMode);
}

return this.xhrGet(url, response);
return this.xhrGet(
url.join('/').replace(/\/+$/, ''),
response
);
}

/**
Expand Down Expand Up @@ -961,12 +990,12 @@
}

/**
* Highlight matched portions in the item label.
*
* @param {string} str - Item label to highlight.
* @param {Array.Array.<number>} indices - Array of character offset pairs.
* @return {string} Highlighted string (using "mark" elements).
*/
* Highlight matched portions in the item label.
*
* @param {string} str - Item label to highlight.
* @param {Array.Array.<number>} indices - Array of character offset pairs.
* @return {string} Highlighted string (using "mark" elements).
*/
this.highlight = function (str, indices)
{
if (indices.length === 0)
Expand Down Expand Up @@ -1173,7 +1202,7 @@
}

e.preventDefault();
break;
break;

case KEY_DOWN:
case KEY_DOWN_LEGACY:
Expand All @@ -1187,20 +1216,20 @@
}

e.preventDefault();
break;
break;

case KEY_ESC:
case KEY_ESC_LEGACY:
menu.close(true);
break;
break;

case KEY_TAB:
if (menu.hasFocus)
{
menu.select();
e.preventDefault();
}
break;
break;

case KEY_ENTER:
if (menu.hasFocus)
Expand All @@ -1212,7 +1241,7 @@
{
menu.close();
}
break;
break;

default:
searchDebounced(element);
Expand Down
Loading

0 comments on commit 3c969ef

Please sign in to comment.