Improved autocomplete widget

htdocs/Autocomplete.vue

@@ -1,44 +1,36 @@
 <template>
-	<div class="autocomplete">
-		<input type="text" @input="option_open" v-model="xvalue" @keydown.down="option_down" @keydown.up="option_up" @keydown.enter="option_enter" />
-		<ul id="autocomplete-results" v-show="open" class="autocomplete-results">
+	<div class="dropdown" :class="{ 'form-floating': label }">
+		<input type="text" class="form-control" placeholder=" " @focus="option_open" @input="option_filter" v-model="x_modelValue" @keydown.down="option_down" @keydown.up="option_up" @keydown.enter="option_enter" />
+		<ul class="dropdown-menu shadow" :class="{ show: (open) && (results.length > 0) }">
 			<li class="loading" v-if="!items">Loading results...</li>
-			<li v-else v-for="(result, i) in results" :key="i" @click="option_click(result)" class="autocomplete-result" :class="{ 'is-active': i === index }">{{ result }}</li>
+			<li v-else v-for="(result, i) in results" :key="i" @click="option_click(result)" class="dropdown-item" :class="{ 'is-active': i === index }">{{ result }}</li>
 		</ul>
+		<label v-if="label">{{label}}</label>
 	</div>
 </template>
 
 <style scoped>
-	.autocomplete {
-		position: relative;
-	}
-
-	.autocomplete-results {
-		padding: 0;
-		margin: 0;
-		border: 1px solid #eeeeee;
-		height: 120px;
+	.dropdown-menu {
+		width: 100%;
+		max-height: 10rem;
 		overflow: auto;
 	}
 
-	.autocomplete-result {
-		list-style: none;
-		text-align: left;
-		padding: 4px 2px;
-		cursor: pointer;
+	.dropdown-item {
+		cursor: default;
 	}
 
-	.autocomplete-result.is-active,
-	.autocomplete-result:hover {
-		background-color: #4AAE9B;
-		color: white;
+	.dropdown-item.is-active,
+	.dropdown-item:hover {
+		background-color: var(--bs-primary);
+		color: var(--bs-body-bg);
 	}
 </style>
 
 <script>
 	export default {
 		props: {
-			value: {
+			modelValue: {
 				type: String,
 				default: ''
 			},
@@ -46,26 +38,30 @@
 				type: Array,
 				required: false,
 				default: () => [],
-			}
+			},
+			label: String
 		},
+		emits: [
+			'update:modelValue'
+		],
 		data() {
 			return {
-				xvalue: '',
+				x_modelValue: this.modelValue,
 				results: [],
 				open: false,
 				index: -1,
 			};
 		},
 		watch: {
-			value(val) {
-				this.xvalue = val;
+			modelValue(val) {
+				this.x_modelValue = val;
 			},
-			xvalue(val) {
-				this.$emit('update:value', val);
+			x_modelValue(val) {
+				this.$emit('update:modelValue', val);
 			}
 		},
 		mounted() {
-			this.xvalue = this.value;
+			this.x_modelValue = this.modelValue;
 			document.addEventListener('click', this.option_close)
 		},
 		destroyed() {
@@ -74,7 +70,16 @@
 		methods: {
 			option_open() {
 				if(this.items) {
-					this.results = this.items.filter((item) => item.toLowerCase().indexOf(this.xvalue.toLowerCase()) > -1);
+					this.results = this.items;
+					this.open = true;
+				}
+			},
+			option_filter() {
+				if(this.items) {
+					if(this.x_modelValue) {
+						var selection = this.x_modelValue.toLowerCase();
+						this.results = this.items.filter((item) => item.toLowerCase().indexOf(selection) >= 0);
+					} else this.results = this.items;
 					this.open = true;
 				}
 			},
@@ -85,12 +90,12 @@
 				if(this.index > 0) this.index--;
 			},
 			option_enter() {
-				this.xvalue = this.results[this.index];
+				this.x_modelValue = this.results[this.index];
 				this.open = false;
 				this.index = -1;
 			},
 			option_click(result) {
-				this.xvalue = result;
+				this.x_modelValue = result;
 				this.open = false;
 			},
 			option_close(evt) {

htdocs/ViewSchedule.vue

@@ -1,7 +1,7 @@
 <template>
 	<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
 		<thead>
-			<tr><th>Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th>Assignee</th></tr>
+			<tr><th>Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
 		</thead>
 		<tbody>
 			<tr v-for="row in appointments" :style="{ backgroundColor: strHashHSL(row.Clinic, '90%') }">
@@ -10,7 +10,7 @@
 				<td v-if="production"><router-link :to="'/patient/$' + row.HRN">{{row.Name}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td>
 				<td v-else><router-link :title="strtr_unscramble(row.Name)" :to="'/patient/$' + row.Name.charAt(0) + row.HRN.slice(-4) + '?name=' + row.Name">{{row.Name}} ${{row.HRN}}</router-link></td>
 				<td>{{row.NOTE}} [{{row.APPT_MADE_BY}} on {{row.DATE_APPT_MADE}}]</td>
-				<td><Autocomplete :value="practitioner[row.Name]" @update:value="x => practitioner[row.Name] = x" :items="practitioner_list" /></td>
+				<td><Autocomplete :modelValue="practitioner[row.Name]" @update:modelValue="x => practitioner[row.Name] = x" :items="practitioner_list" /></td>
 			</tr>
 		</tbody>
 	</table>
@@ -48,7 +48,7 @@
 				return this.client.remotestate.practitioner || (this.client.remotestate.practitioner = {});
 			},
 			practitioner_list() {
-				return this.practitioner ? uniq(Object.values(this.practitioner)).sort() : [];
+				return this.practitioner ? uniq(Object.values(this.practitioner).filter(x => x)).sort() : [];
 			}
 		},
 		watch: {