es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue 3 – necesito ayuda para resaltar texto desde el campo de entrada.

05 Aug, 2023 Programación

Estoy trabajando en un pequeño proyecto que obtiene datos de un archivo json y los muestra en formato de tabla. Hice una función de búsqueda que funciona bien, pero también me gustaría que la letra/palabra ingresada se resalte (como si el usuario estuviera escribiendo algo en el campo de búsqueda y esa parte escrita se estiliza de manera diferente para destacarla en el resultado de la búsqueda). No puedo averiguar cómo implementarlo, cualquier ayuda sería apreciada. Realmente estoy atascado en este punto.

<tr v-for="teacher in mySearchFunc" :key="teacher.id">
  <td><router-link :to="{ name: 'Home'}">{{teacher.name}} </router-link></td>
  <td>{{teacher.birthday}}.{{teacher.birthmonth}}.{{teacher.birthyear}}</td>
  <td>{{teacher.phoneNum}}</td>
  <td>{{teacher.type}}</td>
  <td>{{teacher.id}}</td>
  <td><router-link to="#" class="subjectsBtn">Subjects</router-link></td>
  <td><button class="edit-btn"><span class="material-icons">edit</span></button></td>
  <td><button class="delete-btn"><span class="material-icons">delete</span></button></td>
</tr>

export default {
data() {
return {
teachers: [],
search: ”
}
},
computed: {
mySearchFunc() {
return this.teachers.filter(teacher =>
teacher.name.toLowerCase().includes(this.search.toLowerCase()))
}
}
}

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resaltar la letra/palabra ingresada por el usuario en los resultados de búsqueda, puedes usar una propiedad computada y un método en Vue.js. Aquí tienes un ejemplo de implementación:

    <tr v-for="teacher in mySearchFunc" :key="teacher.id">
  <td>
    <router-link :to="{ name: 'Home'}">
      {{ highlightSearchResult(teacher.name) }}
    </router-link>
  </td>
  <td>{{ teacher.birthday }}.{{ teacher.birthmonth }}.{{ teacher.birthyear }}</td>
  <td>{{ teacher.phoneNum }}</td>
  <td>{{ teacher.type }}</td>
  <td>{{ teacher.id }}</td>
  <td>
    <router-link to="#" class="subjectsBtn">
      Asignaturas
    </router-link>
  </td>
  <td>
    <button class="edit_btn">
      <span class="material-icons">edit</span>
    </button>
  </td>
  <td>
    <button class="delete_btn">
      <span class="material-icons">delete</span>
    </button>
  </td>
</tr>

    export default {
  data() {
    return {
      teachers: [],
      search: ''
    };
  },
  computed: {
    mySearchFunc() {
      return this.teachers.filter((teacher) =>
        teacher.name.toLowerCase().includes(this.search.toLowerCase())
      );
    }
  },
  methods: {
    highlightSearchResult(name) {
      if (!this.search) {
        return name;
      }
      const regex = new RegExp(`(${this.search})`, 'gi');
      return name.replace(regex, '<span class="highlighted">$1</span>');
    }
  }
};

    En el HTML, ahora estamos pasando el nombre del profesor a través de un nuevo método llamado highlightSearchResult que devolverá el nombre con los términos de búsqueda coincidentes envueltos en un span con una clase highlighted.

    En nuestro componente Vue, definimos este método para buscar todas las instancias del término de búsqueda dentro de la cadena (usando una expresión regular) y reemplazarlas con la versión resaltada. También estamos verificando que realmente haya un término de búsqueda antes de aplicar el resaltado.

    Por último, necesitaremos agregar un poco de CSS:

    .highlighted {
  background-color: yellow;
}

    Esto establece que cualquier término de búsqueda resaltado tenga un fondo amarillo, pero puedes ajustarlo según tus necesidades.

    Ahora, cuando un usuario escribe un término de búsqueda en el campo de entrada, todos los resultados que coincidan tendrán esos términos resaltados en amarillo.

Comments are closed.