https://0xoni.ru/_nicegui/3.12.1/components/0014b404fdc510e45bb4b9e0e5a08903/input.js

1export default {
2  template: `
3    <q-input
4      ref="qRef"
5      v-bind="$attrs"
6      v-model="inputValue"
7      :shadow-text="shadowText"
8      @keydown.tab="perform_autocomplete"
9      :list="id + '-datalist'"
10    >
11      <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
12        <slot :name="slot" v-bind="slotProps || {}" />
13      </template>
14    </q-input>
15    <datalist v-if="withDatalist" :id="id + '-datalist'">
16      <option v-for="option in this._autocomplete" :value="option"></option>
17    </datalist>
18  `,
19  props: {
20    _autocomplete: Array,
21    value: String,
22    id: String,
23  },
24  data() {
25    return {
26      inputValue: this.value,
27      emitting: true,
28    };
29  },
30  beforeUnmount() {
31    const element = mounted_app.elements[this.$props.id.slice(1)];
32    if (element) element.props.value = this.inputValue;
33  },
34  watch: {
35    value(newValue) {
36      this.emitting = false;
37      this.inputValue = newValue;
38      this.$nextTick(() => (this.emitting = true));
39    },
40    inputValue(newValue) {
41      if (!this.emitting) return;
42      this.$emit("update:value", newValue);
43    },
44  },
45  computed: {
46    shadowText() {
47      if (!this.inputValue) return "";
48      const matchingOption = this._autocomplete.find((option) =>
49        option.toLowerCase().startsWith(this.inputValue.toLowerCase()),
50      );
51      return matchingOption ? matchingOption.slice(this.inputValue.length) : "";
52    },
53    withDatalist() {
54      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
55      return isMobile && this._autocomplete && this._autocomplete.length > 0;
56    },
57  },
58  methods: {
59    updateValue() {
60      this.inputValue = this.value;
61    },
62    perform_autocomplete(e) {
63      if (this.shadowText) {
64        this.inputValue += this.shadowText;
65        e.preventDefault();
66      }
67    },
68  },
69};