Skip to content

Commit

Permalink
Merge pull request #184 from jerrykan/customClasses
Browse files Browse the repository at this point in the history 
Custom selected item and highlighted text classes
  • Loading branch information
@TarekRaafat
TarekRaafat committed Mar 11, 2021
2 parents ea4ee46 + 5ef3225 commit b6c388d
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 11 deletions.
7 changes: 5 additions & 2 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,9 @@ new autoComplete({
element: "ul"
},
maxResults: 5, // Max. number of rendered results | (Optional)
highlight: true, // Highlight matching results | (Optional)
highlight: {
render: true, // Highlight matching results | (Optional)
}
resultItem: { // Rendered result item | (Optional)
content: (data, source) => {
source.innerHTML = data.match;
Expand Down Expand Up @@ -260,7 +262,8 @@ new autoComplete({
| `resultsList` | Rendered results list destination, position, element & navigation | **-** `Object` with 8 methods<br> 1- render: `Boolean` <br> 2- container: <br> `Function` `(source)` => { ... }<br> 3- destination: <br>**-** `String` `String` `id`/`class` <br>**OR**<br>**-** `Function` ( ) => `document.querySelector("")`<br> 4- position:<br> `"beforebegin"`, `"afterbegin"`, `"beforeend"`, `"afterend"` lowerCase string <br> 5- element: <br> `"ul", "span", "div" or Custom` <br> 6- idName: `"id"` <br> 7- className: `"class"` <br> 8- navigation: `Function` `(event, input, resListElement, onSelection, resListData)` => { ... } | 1- render: `true` <br> 2- container: `(source)` => { ... } <br> 3- destination: `"#autoComplete"` <br> 4- position: `"afterend"` <br> 5- element: `"ul"` <br> 6- idName: `"autoComplete_list"` <br> 7- className: `"autoComplete_list"` <br> 8- navigation: `default` |
| `resultItem` | Rendered result Item content & element | **-** `Object` with 4 methods<br> 1- content: <br>**-** `Function` `(data, source)` => { ... } <br> **-** `data.match` has to be used for **Highlighted** result <br> 2- element: <br> `"li", "span", "div" or Custom` <br> 3- idName: `"id` <br> 4- className: `"class` | 1- content: `(data, source)` => { ... } <br> 2- element: `"li"` <br> 3- idName: `"autoComplete_result"` <br> 4- className: `"autoComplete_result"` |
| `noResults` | Action script on noResults found | **-** `Function` `(dataFeedback, generateList)` => { ... } | No Action |
| `highlight` | Highlight matching results | **-** `Boolean` | `false` |
| `selection` | Format selected result item | **-** `Object` with 1 method<br> 1- className: `"class"` | 1- className: `autoComplete_selected` |
| `highlight` | Highlight matching results | **-** `Object` with 2 methods<br> 1- render: `Boolean` <br> 2- className: `"class"` | 1- render: `false` <br> 2- className: `autoComplete_highlighted` |
| `maxResults` | Maximum number of displayed results | **-** `Number` | `5` |
| `feedback` | Action script on dataFeedback event | **-** `Function` `(data)` => { ... } | No Action |
| `onSelection` | Action script onSelection event | **-** `Function` `(feedback)` => { ... } | No Action |
Expand Down
20 changes: 16 additions & 4 deletions src/autoComplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default class autoComplete {
threshold = 1, // Minimum characters length before engine starts rendering
debounce = 0, // Minimum duration for API calls debounce
resultsList: {
render = true,
render: resultsListRender = true,
container = false,
destination, // Results list selector
position = "afterend", // Results list position
Expand All @@ -58,7 +58,13 @@ export default class autoComplete {
className: resultItemClass = "autoComplete_result",
} = {},
noResults, // No results action
highlight = false, // Highlighting matching results
selection: {
className: selectionClass = "autoComplete_selected",
} = {},
highlight: {
render: highlightRender = false,
className: highlightClass = "autoComplete_highlighted",
} = {},
feedback, // Data feedback
onSelection, // Action function on result selection
} = config;
Expand All @@ -84,7 +90,7 @@ export default class autoComplete {
this.threshold = threshold;
this.debounce = debounce;
this.resultsList = {
render,
render: resultsListRender,
container,
destination: destination || this.selector,
position,
Expand All @@ -103,7 +109,13 @@ export default class autoComplete {
className: resultItemClass,
};
this.noResults = noResults;
this.highlight = highlight;
this.selection = {
className: selectionClass,
};
this.highlight = {
render: highlightRender,
className: highlightClass,
}
this.feedback = feedback;
this.onSelection = onSelection;
// Assign the input field selector
Expand Down
8 changes: 6 additions & 2 deletions src/controllers/navigationController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ const navigate = (config, dataFeedback) => {
// Remove "active" class from the item
list[index].removeAttribute("aria-selected");
// list[index].setAttribute("aria-selected", "false");
list[index].classList.remove("autoComplete_selected");
if (config.selection.className !== "") {
list[index].classList.remove(config.selection.className);
}
}
};

Expand All @@ -76,7 +78,9 @@ const navigate = (config, dataFeedback) => {
if (currentFocus < 0) currentFocus = list.length - 1;
// Add "active" class to the item
list[currentFocus].setAttribute("aria-selected", "true");
list[currentFocus].classList.add("autoComplete_selected");
if (config.selection.className !== "") {
list[currentFocus].classList.add(config.selection.className);
}
};

/**
Expand Down
6 changes: 3 additions & 3 deletions src/services/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default (query, record, config) => {
// Matching case
if (searchPosition < query.length && recordLowerCase[number] === query[searchPosition]) {
// Highlight matching character
recordChar = config.highlight ? `<span class="autoComplete_highlighted">${recordChar}</span>` : recordChar;
recordChar = config.highlight.render ? `<span class="${config.highlight.className}">${recordChar}</span>` : recordChar;
// Increment search position
searchPosition++;
}
Expand All @@ -50,8 +50,8 @@ export default (query, record, config) => {
const pattern = new RegExp(`${query}`, "i");
// Search for a match Query in Record
query = pattern.exec(record);
const match = config.highlight
? record.replace(query, `<span class="autoComplete_highlighted">${query}</span>`)
const match = config.highlight.render
? record.replace(query, `<span class="${config.highlight.className}">${query}</span>`)
: record;
// Returns the match
return match;
Expand Down

0 comments on commit b6c388d

Please sign in to comment.