I want to make a LWC which input keywords and show the results on list using lightning-layout & lightning-layout-item. And I want to make it that doesn't depend on SObjects.
Now, I have a problem the list. it inputs any keywords doesn't show anything. html is below;
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small">
<lightning-input
type="search" label=""
name="search-key"
placeholder="Input Name for Search"
onchange={handleSearchKeyChanged}
value={searchKey}>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
<div class="slds-m-around_small">
<lightning-layout multiple-rows="true" draggable="true">
<template if:true={searchResult} for:each={searchResult} for:item="row" key={row.id}>
<lightning-layout-item key={row.id}>
<span>{row.name}, {row.detail}, {row.lastUpdate}</span>
</lightning-layout-item>
</template>
</lightning-layout>
</div>
and here is JS;
searchKey = '';
searchedResult = {};
handleSearchKeyChanged(e) {
window.clearTimeout(this.delayTimeout);
const searchKey = e.target.value;
this.delayTimeout = setTimeout(() => {
this.searchKey = searchKey;
}, DELAY);
}
@wire(getSearchedList, {searchKey: '$searchKey', selectSObj: '$selectedSObj'})
getSearchedListResult({error, data}) {
if (data) {
this.searchedResult = JSON.parse(data);
console.log('>>> searchResult: ', this.searchedResult);
} else if (error) {
this.error = error;
}
};
console.log in getSearchedListResult, it shows data. It worked when I use lightning-datatable, but it can't use for my reason.
I think it's similler question is here but it looks unresolved: Lightning Web Component - passing object between component