Autocomplete
Basic usage
<script setup lang="ts">
import { NmorphAutocomplete } from "@nmorph/nmorph-ui-kit";
const text = ref("");
const list = ref([{ value: "First" }, { value: "Second" }, { value: "Third" }]);
</script><template>
<div class="autocomplete-basic-usage-overview">
<NmorphAutocomplete v-model="text" :list="list" placeholder="Text..." />
</div>
</template>Thickness
Defines the thickness of the autocomplete input field.
<script setup lang="ts">
import { NmorphAutocomplete } from "@nmorph/nmorph-ui-kit";
const text = ref("");
const list = ref([{ value: "First" }, { value: "Second" }, { value: "Third" }]);
</script><template>
<div class="autocomplete-thickness-overview">
<NmorphAutocomplete thickness="thick" v-model="text" :list="list" />
<NmorphAutocomplete thickness="basic" :list="list" />
<NmorphAutocomplete thickness="thin" :list="list" />
</div>
</template>Disabled
Disables the autocomplete field.
<script setup lang="ts">
import { NmorphAutocomplete } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="autocomplete-disabled-overview">
<NmorphAutocomplete :list="[]" disabled />
</div>
</template>Action-callback
Function called when typing in the input.
<script setup lang="ts">
import { NmorphAutocomplete } from "@nmorph/nmorph-ui-kit";
const text = ref("");
const list = ref([]);
const actionCallback = async () => {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts?_limit=5",
);
const data = await response.json();
list.value = data.map((el: unknown) => {
const listEl = el as { title: string };
return {
value: listEl.title,
};
});
} catch {
list.value = [];
}
};
</script><template>
<div class="autocomplete-action-callback-overview">
<NmorphAutocomplete
v-model="text"
:list="list"
placeholder="Text..."
:action-callback="actionCallback"
/>
</div>
</template>