` that contains all the extra suggestions from the Query Suggestions index (`.suggestion-tags-container`).
Write the CSS to style the search box and predictive box. The goal is to ensure:
* The ``s overlap perfectly
* The predictive box appears behind the search box (so that your users can still type their queries)
* The predictive box and search box have different text colors.
```css CSS icon=paintbrush theme={"system"}
.search-box-container input {
border: none;
border-bottom: 1px solid #cecece;
width: 100%;
font-size: 20px;
background: transparent;
padding: 0 !important;
outline: none;
height: 100%;
position: relative;
z-index: 99;
font-family: Arial, Helvetica, sans-serif;
}
#predictive-box {
height: 49px;
padding: 0 !important;
display: flex;
align-items: center;
position: absolute;
border-bottom: 1px solid transparent;
}
#predictive-box-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #a2a2a2;
}
```
This guide doesn't include the complete CSS.
You can find it in the [source code](https://github.com/algolia/solutions/blob/master/predictive-search-box-widget-demo/predictive-search-box/predictive-search-box.css).
Define a helper function that checks if users have pressed a specific key.
```js JavaScript icon=code theme={"system"}
const isKey = (event, code, name) => event.which === code || event.keyCode === code || event.key === name;
```
1. Create a `PredictiveSearchBox` class. You'll add methods in the following steps.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// Add methods to the class in the following steps
}
```
2. Add a constructor for the `PredictiveSearchBox`.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
constructor(options) {
Object.assign(this, options);
this.client = algoliasearch(options.appID, options.apiKey);
this.querySuggestionsIndex = this.client.initIndex(
this.querySuggestionsIndex
);
this.maxSuggestions = 5;
this.tabActionSuggestion = '';
}
}
```
3. Add an initialization method for the `PredictiveSearchBox` class.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
init(initOptions) {
const widgetContainer = document.querySelector(this.container);
if (!widgetContainer) {
throw new Error(
`Could not find widget container ${this.container} inside the DOM.`
);
}
widgetContainer.innerHTML = renderSearchBoxContainer(
this.placeholder,
initOptions.helper.state.query
);
this.predictiveSearchBox = widgetContainer.querySelector('#predictive-box');
this.predictiveSearchBoxItem = widgetContainer.querySelector(
'#predictive-box-text'
);
this.clearButton = widgetContainer.querySelector('#clear-input');
this.searchBoxInput = widgetContainer.querySelector('#search-box-input');
this.suggestionTagsContainer = widgetContainer.querySelector(
'#suggestion-tags-container'
);
this.registerSearchBoxHandlers(
initOptions.helper,
this.searchBoxInput,
this.clearButton
);
}
}
```
Register handlers for searching, handling suggestions, tab completion, and keyboard navigation.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
registerSearchBoxHandlers = (helper, searchBox, clearButton) => {
searchBox.addEventListener('input', event => this.updateTabActionSuggestion(event));
searchBox.addEventListener('keydown', event => this.onTabSelection(event));
clearButton.addEventListener('click', event => this.clear(event));
searchBox.addEventListener('input', event => {
helper.setQuery(event.currentTarget.value).search();
});
};
}
```
Add a setter method for the value of the search box input.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
setSearchBoxValue = value => {
this.searchBoxInput.value = value;
this.searchBoxInput.dispatchEvent(new Event('input'));
};
}
```
Add a handler method that calls `setSearchBoxValue` to set the search box value to the suggestion displayed in the predictive box when users press the right arrow.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
onTabSelection = event => {
if (!isKey(event, 39, 'ArrowRight')) return;
event.preventDefault();
this.setSearchBoxValue(this.tabActionSuggestion);
};
}
```
Add a method that updates the suggestions tags based on the new hits from the query response.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
updateSuggestionTags = hits => {
if (!this.maxSuggestions || this.maxSuggestions <= 0) return hits;
this.clearSuggestionTags();
hits.slice(0, this.maxSuggestions).forEach(suggestion => {
const suggestionElement = document.createElement('button');
suggestionElement.classList.add('suggestion-tag');
suggestionElement.innerHTML = suggestion._highlightResult.query.value;
suggestionElement.addEventListener('click', () => {
this.setSearchBoxValue(suggestion.query);
});
this.suggestionTagsContainer.append(suggestionElement);
});
};
}
```
Add a method that dispatches a search on your Query Suggestions index and uses the results to update the suggestions in the predictive box and suggestions tags. This method triggers whenever the query changes.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
updateTabActionSuggestion = event => {
const query = event.currentTarget.value;
if (!query) {
this.predictiveSearchBox.style.display = 'none';
this.clearButton.style.display = 'none';
return;
}
this.querySuggestionsIndex
.search({ query })
.then(response => {
const suggestions = response.hits.filter(hit =>
hit.query.startsWith(query)
);
if (!suggestions.length) {
this.clearPredictiveSearchBox();
return [];
}
this.predictiveSearchBox.style.display = 'flex';
this.predictiveSearchBoxItem.innerText = suggestions[0].query;
this.tabActionSuggestion = suggestions[0].query;
return suggestions.slice(1);
})
.then(this.updateSuggestionTags);
};
}
```
1. Add a method that removes all suggestions tags so they can be updated.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
clearSuggestionTags = () => {
this.suggestionTagsContainer.innerHTML = '';
};
}
```
2. Add a method that removes the predictive box suggestion.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
clearPredictiveSearchBox = () => {
this.tabActionSuggestion = '';
};
}
```
3. Add a method that clears all suggestion content from your search container, letting you update it with new suggestions.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
clear = event => {
this.searchBoxInput.value = '';
this.predictiveSearchBoxItem.innerText = '';
this.clearSuggestionTags();
this.tabActionSuggestion = '';
event.target.style.display = 'none';
searchBoxInput.dispatchEvent(new Event('input'));
};
}
```
Export the `PredictiveSearchBox` class so you can import it into your app.
```js JavaScript icon=code theme={"system"}
class PredictiveSearchBox {
// ...
}
export default PredictiveSearchBox;
```