DEV Community: jhomegroup

Autocomplete functionality in a Vue.js component using Bootstrap 5

jhomegroup — Tue, 21 Jan 2025 07:10:59 +0000

Component Code (AutocompleteInput.vue)

<template>
  <div class="mb-3">
    <label for="autocomplete-input" class="form-label">{{ label }}</label>
    <input
      id="autocomplete-input"
      type="text"
      class="form-control"
      v-model="inputValue"
      @input="onInput"
      @focus="showDropdown = true"
      @blur="onBlur"
      :placeholder="placeholder"
    />
    <ul
      class="dropdown-menu w-100"
      :class="{ show: showDropdown && filteredSuggestions.length }"
    >
      <li
        v-for="(item, index) in filteredSuggestions"
        :key="index"
        @mousedown.prevent="selectSuggestion(item)"
        class="dropdown-item"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "AutocompleteInput",
  props: {
    label: {
      type: String,
      default: "Autocomplete",
    },
    suggestions: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: "Type to search...",
    },
  },
  data() {
    return {
      inputValue: "",
      showDropdown: false,
    };
  },
  computed: {
    filteredSuggestions() {
      const input = this.inputValue.toLowerCase();
      return this.suggestions.filter((item) =>
        item.toLowerCase().includes(input)
      );
    },
  },
  methods: {
    onInput() {
      this.showDropdown = true;
    },
    onBlur() {
      // Delay hiding dropdown to allow click event to register
      setTimeout(() => {
        this.showDropdown = false;
      }, 200);
    },
    selectSuggestion(item) {
      this.inputValue = item;
      this.showDropdown = false;
      this.$emit("selected", item);
    },
  },
};
</script>

<style scoped>
/* Optional: Add custom styles if needed */
</style>

Usage Example

<template>
  <div class="mb-3 position-relative">
    <label for="autocomplete-input" class="form-label">{{ label }}</label>
    <input
      id="autocomplete-input"
      type="text"
      class="form-control"
      v-model="inputValue"
      @input="onInput"
      @focus="showDropdown = true"
      @blur="onBlur"
      :placeholder="placeholder"
      ref="input"
    />
    <ul
      class="dropdown-menu"
      :class="{ show: showDropdown && filteredSuggestions.length }"
      :style="{ width: dropdownWidth + 'px' }"
    >
      <li
        v-for="(item, index) in filteredSuggestions"
        :key="index"
        @mousedown.prevent="selectSuggestion(item)"
        class="dropdown-item"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "AutocompleteInput",
  props: {
    label: {
      type: String,
      default: "Autocomplete",
    },
    suggestions: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: "Type to search...",
    },
  },
  data() {
    return {
      inputValue: "",
      showDropdown: false,
      dropdownWidth: 0, // To dynamically match the input width
    };
  },
  computed: {
    filteredSuggestions() {
      const input = this.inputValue.toLowerCase();
      return this.suggestions.filter((item) =>
        item.toLowerCase().includes(input)
      );
    },
  },
  methods: {
    onInput() {
      this.showDropdown = true;
    },
    onBlur() {
      // Delay hiding dropdown to allow click event to register
      setTimeout(() => {
        this.showDropdown = false;
      }, 200);
    },
    selectSuggestion(item) {
      this.inputValue = item;
      this.showDropdown = false;
      this.$emit("selected", item);
    },
    updateDropdownWidth() {
      // Set the dropdown width dynamically based on the input element
      if (this.$refs.input) {
        this.dropdownWidth = this.$refs.input.offsetWidth;
      }
    },
  },
  mounted() {
    this.updateDropdownWidth();
    window.addEventListener("resize", this.updateDropdownWidth); // Update width on window resize
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.updateDropdownWidth);
  },
};
</script>

<style scoped>
/* Ensure dropdown appears directly below the input field */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}
</style>

Start Project npm install --save bootstrap jquery popper.js axios With Vuejs Cli Project

jhomegroup — Fri, 30 Oct 2020 03:13:56 +0000

npm install --save axios bootstrap jquery popper.js

/* Bootstrap CSS */
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

/* jQuery */
import JQuery from 'jquery'
window.$ = JQuery

Import JQuery With Vuejs Cli

jhomegroup — Thu, 22 Oct 2020 12:58:57 +0000

// main.js

import JQuery from 'jquery'
window.$ = JQuery

Create Project VueJS Cli

jhomegroup — Wed, 21 Oct 2020 18:04:29 +0000

// create project client vue cli

vue init webpack client

cd client

npm install --save bootstrap jquery popper.js

// main.js or app.js
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

// Add vuex
vue add vuex

Sweer Alert [TH] With Vuejs

jhomegroup — Wed, 21 Oct 2020 03:14:30 +0000

npm i vue-sweetalert2

main.js

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);

Success

    this.$swal({
      position: "top",
      icon: "success",
      title: "บันทึกข้อมูลสำเร็จ!",
      showConfirmButton: false,
      timer: 1600,
    });

AlertEditSuccess

    this.$swal({
      position: "top",
      icon: "success",
      title: "แก้ไขข้อมูลสำเร็จ!",
      showConfirmButton: false,
      timer: 1600,
    });

AlertDeleteConfirm

    this.$swal({
      title: "คุณแน่ใจไหม?",
      text: "คุณจะลบรายการข้อมูลนี้ และไม่สามารถกู้คืนกลับได้!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "ใช่ลบ!",
      cancelButtonText: "ปิด",
    }).then((result) => {
      if (result.isConfirmed) {
        this.$swal("ลบแล้ว!", "รายการข้อมูลนี้ถูกลบแล้ว.", "success");
      }
    });

AlertError

    this.$swal({
      position: "top",
      icon: "error",
      title: "เกิดข้อผิดพลาด! ไม่สามารถทำรายการได้",
      showConfirmButton: false,
      timer: 1600,
    });

Sweet Alert

jhomegroup — Wed, 21 Oct 2020 03:14:07 +0000

use Illuminate\Http\Request;

public function register(Request $requies)
{
    Validator::make($requies->all(), [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $requies['name'],
        'email' => $requies['email'],
        'password' => Hash::make($requies['password']),
    ]);
}

New Post

jhomegroup — Sun, 11 Oct 2020 04:08:01 +0000

Function Register Laravel Jetstream

jhomegroup — Sun, 11 Oct 2020 04:07:02 +0000

use Illuminate\Http\Request;

public function register(Request $requies)
{
    Validator::make($requies->all(), [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $requies['name'],
        'email' => $requies['email'],
        'password' => Hash::make($requies['password']),
    ]);
}