I am attempting to load tom-select options not loading while using JavaScript's native Fetch API in this example to retrieve remote data from a route. However, JS below fetches a json array of 15527 items but won't show on the options
The Select element...
The JS...
var new_opd1 = "";
new TomSelect('#select-repo',{
valueField: 'url',
labelField: 'icd_name',
searchField: 'icd_name',
// fetch remote data
load: function(query, callback) {
var url =new_opd1+'?q='+query ;
// console.log(url)
fetch(url)
.then(response => response.json())
.then(json => {
//console.log(json.name); ~undefined
callback(json);
// console.log(json);
}).catch(()=>{
callback();
});
},
// custom rendering functions for options and items
render: {
option: function() {
return `<div class="py-2 d-flex">
<div>
<div class="mb-1">
<span class="h4">
${(icd_name) }
</span>
</div>
<span class="h4">
${(icd_code) }
</span>
</div>
</div>`;
},
item: function() {
return `div class="py-2 d-flex">
<div>
<div class="mb-1">
<span class="h4">
${(icd_name) }
</span>
</div>
<div class="description">${(icd_code) }</div>
</div>
</div>`;
}
},
});
The route...
public function getData(Request $request){
$users = ICD10Code::project(["_id" => 0])->get(['icd_code','icd_name']);
return json_encode($users->toArray());
}
I am attempting to recreate this https://tom-select.js.org/examples/remote/. However since my dataset is huge I was wondering if really this would work
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire