Schedule view datalist element

htdocs/ViewSchedule.vue

@@ -4,6 +4,7 @@
 		<div v-else-if="age >= 90000" class="alert alert-warning">⚠ last updated <template v-if="age < 3600000">{{ts.toLocaleString()}}</template><template v-else>{{ts.toLocaleString()}}</template></div>
 	</template>
 	<div v-if="filter_array.length > 0"><span class="tag badge bg-primary" @click="filter = {}">CLEAR {{filter_array.length}} TAG{{filter_array.length > 1 ? 'S' : ''}}</span><span v-for="key in filter_array" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="delete filter[key]">❌ {{key.toUpperCase()}}</span></div>
+	<datalist :id="'datalist-' + uid"><option v-for="item in practitioner_list" :value="item" /></datalist>
 	<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
 		<thead>
 			<tr><th style="width: 7rem;">Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
@@ -18,7 +19,7 @@
 				<td>{{row.RESOURCENAME}}</td>
 				<td><router-link :to="'/patient/' + row.PATIENTID">{{row.PATIENTNAME}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td>
 				<td>{{row.NOTE}}<span v-for="(value, key) in gettags(row)" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="filter[key] = true">{{value}}</span></td>
-				<td><Autocomplete :modelValue="practitioner[row.PATIENTNAME]" @update:modelValue="x => practitioner[row.PATIENTNAME] = x" :items="practitioner_list" /></td>
+				<td><input class="form-control" :list="'datalist-' + uid" :value="practitioner[row.PATIENTNAME]" @input="e => practitioner[row.PATIENTNAME] = e.target.value" /></td>
 			</tr>
 		</tbody>
 	</table>
@@ -60,8 +61,6 @@
 <script>
 	import { uniq, strHashHSL, strfdate_vista, debounce } from './util.mjs';
 
-	import Autocomplete from './Autocomplete.vue';
-
 	function clearTimeouts(timers) {
 		if(timers.length > 1) console.warn('Clearing multiple timeouts', timers.slice());
 		for(var i = 0; i < timers.length; ++i) window.clearTimeout(timers[i]);
@@ -69,9 +68,6 @@
 	}
 
 	export default {
-		components: {
-			Autocomplete
-		},
 		props: {
 			client: Object,
 			selection: {
@@ -83,6 +79,7 @@
 		},
 		data() {
 			return {
+				uid: Math.random()*0x7fffffff|0,
 				appointments: [],
 				timers: [],
 				ts: null,