Issue with KTSelect with Remote Data
The component make the call to the server but the results are not displayed under the search input text.
This is my html code:
<select id="comune_di_nascita" name="comune_di_nascita" class="kt-select " data-kt-select="true" data-kt-select-remote="true" data-kt-select-data-url=" data-kt-select-data-field-value="id" data-kt-select-data-field-text="text" data-kt-select-enable-search="true" data-kt-select-search-param="term" data-kt-select-search-min-length="2" data-kt-select-search-debounce="300" data-kt-select-debug="true" data-kt-select-placeholder="Cerca...">
</select>
This is the console.log debug:
[Log] Initializing remote data with URL: – " (ktui.min.js, line 1)
[Log] Fetching remote data from: – " (ktui.min.js, line 1)
[Log] Processing API response: – [] (0) (ktui.min.js, line 1)
[Log] Mapping 0 items to KTSelectOptionData format (ktui.min.js, line 1)
[Log] Returned 0 mapped items (ktui.min.js, line 1)
[Log] Remote data fetched: – [] (0) (ktui.min.js, line 1)
[Log] Generating options HTML from 0 items (ktui.min.js, line 1)
[Log] No items to generate options from (ktui.min.js, line 1)
[Log] Generating options HTML from remote data (ktui.min.js, line 1)
[Log] Initializing search module with input: – (ktui.min.js, line 1)
<div data-kt-select-search class="kt-select-search ">…</div>
<div data-kt-select-search class="kt-select-search ">…</div>
[Log] openDropdown called, dropdownModule exists: – true (ktui.min.js, line 1)
[Log] Opening dropdown via dropdownModule... (ktui.min.js, line 1)
[Log] Fetching remote data from: – " (ktui.min.js, line 1)
[Log] Processing API response: – [{id: 59024, text: "Sabaudia (LT)", cap: "04016"}, {id: 17168, text: "Sabbio Chiese (BS)", cap: "25070"}, {id: 20054, text: "Sabbioneta (MN)", cap: "46018"}, …] (655) (ktui.min.js, line 1)
[{id: 59024, text: "Sabaudia (LT)", cap: "04016"}, {id: 17168, text: "Sabbio Chiese (BS)", cap: "25070"}, {id: 20054, text: "Sabbioneta (MN)", cap: "46018"}, {id: 65113, text: "Sacco (SA)", cap: "84070"}, {id: 28073, text: "Saccolongo (PD)", cap: "35030"}, {id: 93037, text: "Sacile (PN)", cap: "33077"}, {id: 58093, text: "Sacrofano (RM)", cap: "00060"}, {id: 111058, text: "Sadali (SU)", cap: "09062"}, {id: 95086, text: "Sagama (OR)", cap: "09090"}, {id: 96056, text: "Sagliano Micca (BI)", cap: "13816"}, …]Array (655)
[Log] Mapping 655 items to KTSelectOptionData format (ktui.min.js, line 1)
[Log] Mapping fields: value=id, label=text (ktui.min.js, line 1)
[Log] Item data: – "{\"id\":59024,\"text\":\"Sabaudia (LT)\",\"cap\":\"04016\"}..." (ktui.min.js, line 1)
[Log] Extracted [id] => 59024 (ktui.min.js, line 1)
[Log] Final ID value: 59024 (ktui.min.js, line 1)
[Log] Extracted [text] => Sabaudia (LT) (ktui.min.js, line 1)
[Log] Title/label field [text]: – "Sabaudia (LT)" (ktui.min.js, line 1)
[Log] Final mapped item: – "{\"id\":\"59024\",\"title\":\"Sabaudia (LT)\"}" (ktui.min.js, line 1)
[Log] Mapped item: {"id":"59024","title":"Sabaudia (LT)"} (ktui.min.js, line 1)
[Log] Mapping fields: value=id, label=text (ktui.min.js, line 1)
[Log] Item data: – "{\"id\":17168,\"text\":\"Sabbio Chiese (BS)\",\"cap\":\"25070\"}..." (ktui.min.js, line 1)
[Log] Extracted [id] => 17168 (ktui.min.js, line 1)
[Log] Final ID value: 17168 (ktui.min.js, line 1)
[Log] Extracted [text] => Sabbio Chiese (BS) (ktui.min.js, line 1)
[Log] Title/label field [text]: – "Sabbio Chiese (BS)" (ktui.min.js, line 1)
[Log] Final mapped item: – "{\"id\":\"17168\",\"title\":\"Sabbio Chiese (BS)\"}" (ktui.min.js, line 1)
[Log] Mapped item: {"id":"17168","title":"Sabbio Chiese (BS)"} (ktui.min.js, line 1)
[Log] Mapping fields: value=id, label=text (ktui.min.js, line 1)
Replies (7)
Hi
<option selected> is simpler, seems it does not work for a remote data source. We will fix this issue.
The data-kt-select-pre-selected attribute is useful for React.
Thanks
Ho i can set existent selected value?
Hi,
Yes, you can set an existing selected value for KTSelect with remote data.
Using data-kt-select-pre-selected attribute
<select
name="comune_di_nascita"
class="kt-select"
data-kt-select="true"
data-kt-select-remote="true"
data-kt-select-data-url="
data-kt-select-data-field-value="id"
data-kt-select-data-field-text="text"
data-kt-select-enable-search="true"
data-kt-select-search-param="term"
data-kt-select-search-min-length="2"
data-kt-select-search-debounce="300"
data-kt-select-pre-selected="59024"
data-kt-select-placeholder="Cerca...">
</select>For multiple selections with remote data
data-kt-select-pre-selected="59024,17168,20054"The data-kt-select-pre-selected attribute accepts comma-separated values for multiple selections
For remote data, the component will automatically select the specified values once the remote data is fetched
The pre-selected values must match the actual values returned from your remote API
I think there is a logic problem, usually the API accepts a string and returns a list of values ​​by doing a search on the string, if we use data-kt-select-pre-selected to make a call to the API nothing will be found because we are passing an id, isn't it simpler to use the option selected element that can be found inside the select?
with latest version works great
Great, let us know if you have issues.
Thanks
Hi
May I know if you are using the latest version of KTUI v1.0.23?
https://github.com/keenthemes/ktui
Thanks
