Hi Team,
I am unable to trigger filter event on focus and arrow key function with empty string. Need to call API call on pressing arrow keys or onfocus
Requirement: User should be able to see autocomplete results with empty string by pressing arrow keys or focusing autocomplete.
- Autocomplete component
<ejs-autocomplete
:dataSource="outletsOptions"
cssClass="autoCompleteClass"
:filtering="getOutlets"
:value="selectedOutletName"
@change="selectOutlet"
ref="outletAutocomplete"
></ejs-autocomplete>
- Filtering event
getOutlets(searchText) {
const client = api()
client
.get('/customer', {
params: {
maxRows: 100,
...(this.selectedSalesman ? { SalesmanID: this.selectedSalesman } : {}),
term: searchText.text ? searchText.text : 'all',
autotext: searchText.text ? searchText.text : 'all',
_: new Date().getTime()
}
})
.then(response => {
if (response.data.CustomerMaster && response.data.CustomerMaster.length > 0) {
let optionArray = []
response.data.forEach(item => {
let option = { id: '', text: '' }
option.id = item.CustomerID
option.text = item.CustomerName + '(' + item.CustomerCode + ')'
optionArray.push(option)
})
this.outletsOptions = [...optionArray]
}
})
.catch(error => {
console.error(error, 'Unable to search division')
})
},
- Response from API call
{
"CustomerMaster": [
{
"CustomerID": 11718,
"CustomerCode": "0500732349",
"CustomerName": "SHREE SHRIJI NASTA HOUSE",
"CustomerNameCode": "SHREE SHRIJI NASTA HOUSE (0500732349)",
"CustomerPaymentType": 1,
"SalesMode": 0,
"PromotionControl": "1",
"CustomerState": 12,
"DistributorState": 1,
"CustomerStateType": 0,
"DistributorStateType": 0,
"BillToCustomer": ""
},
{
"CustomerID": 11730,
"CustomerCode": "0500733131",
"CustomerName": "SHIVAM DAIRY",
"CustomerNameCode": "SHIVAM DAIRY (0500733131)",
"CustomerPaymentType": 1,
"SalesMode": 1,
"PromotionControl": "1",
"CustomerState": 12,
"DistributorState": 1,
"CustomerStateType": 0,
"DistributorStateType": 0,
"BillToCustomer": ""
}
]
}
