I have a lightning:input field which I use as a searchbox, while typing, I get query suggestions from x endpoint and populate them in an slds-dropdown component (mostly HTML using SLDS).
This works great when I want to select a querysuggestion using a click event, however, when using keys to make a selection, this can become a bit of a pain.
Is there a component that could be leveraged to avoid doing so that would allow me to input a query simultaneously?
current code for the input + dropdown:
<!-- Component Markup -->
<aura:attribute name='searchAsYouType' type='Boolean' default='false' access='global' />
<aura:attribute name='searchInut' type='String' default='' access='global' />
<aura:attribute name="activeQuerySuggestions" type="List" default="[]"/>
<div class="search-container" onkeyup="{!c.handlekeyPress}">
<!-- LIGHTNING:INPUT -->
<lightning:input aura:id="query-box" id="query-box" type="search" name="search" placeholder="additional search terms" onchange="{!c.query}" value="{!v.searchInut}"/>
<!-- DROPDOWN -->
<div id="listbox-suggestions" aura:id="query-suggest-box" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid slds-hide" role="listbox">
<ul aura:id="query-suggest-list" class="slds-listbox slds-listbox_vertical" role="presentation" >
<aura:iteration items="{!v.activeQuerySuggestions}" var="sugg" indexVar="index">
<li aura:id="query-suggest-item" role="presentation" class="slds-listbox__item" >
<div aura:id="query-suggestions" id="{!sugg}" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option"
value="{!sugg}" onclick="{!c.handlesuggestionClick}">
{!sugg}
</div>
</li>
</aura:iteration>
</ul>
</div>
</div>
controller.js:
query : function(cmp, event, helper) {
const typedQuery = event.getSource().get('v.value');
try{
helper.autoComplete(cmp, event, typedQuery);
helper.executeQuery(cmp, event, typedQuery);
}
catch(e){
console.log(e.message);
}
},
handlekeyPress : function(cmp, event, helper) {
/* add custom logic for key press event */
},
handlesuggestionClick : function(cmp, event, helper) {
const qrySuggBox = cmp.find('query-suggest-box');
const qryBox = cmp.find('query-box');
$A.util.addClass(qrySuggBox, 'slds-hide');
qryBox.set('v.value', event.target.id);
helper.onSuggestionClick(cmp, event, event.target.id);
},
helper.js
({
querySuggest : function(cmp, event, inp) {
/*query endpoint for suggestion */
},
autoComplete : function(cmp, event, inp){
let activeSuggestionArray = [];
const querySuggestBox = cmp.find("query-suggest-box");
this.querySuggest(cmp, event, inp).then(function(suggestions){
const theRes = JSON.parse(suggestions);
const allRes = theRes.completions;
allRes.forEach(function(element) {
activeSuggestionArray.push(element.expression);
});
//can add sorting as per relevance indicator .sort()
//also, can change collection type to receive a map in order
//to keep leverage other attributes for sorting/displaying
cmp.set('v.activeQuerySuggestions', activeSuggestionArray);
/*---class validation to hide/display suggestion box---*/
if(cmp.get('v.activeQuerySuggestions').length > 0 &&
$A.util.hasClass(querySuggestBox, "slds-hide")){
$A.util.removeClass(querySuggestBox, 'slds-hide');
}
else if(cmp.get('v.activeQuerySuggestions').length == 0){
$A.util.addClass(querySuggestBox, 'slds-hide');
}
});
},
onSuggestionClick : function(cmp, event, selection){
this.executeQuery(cmp, event, selection)
},
/* -- community search -- */
executeQuery : function(cmp, event, theQuery){
const urlEvent = $A.get("e.force:navigateToURL");
urlEvent.setParams({
"url": "/global-search/"+theQuery
});
urlEvent.fire();
},
})
similar to Lookup Field Dual Keyboard Focus (Answered with working Autocomplete lookup component and JS example for VF/SLDS) but in lightning and trying to leverage lightning:components when possible.
