jQuery Autocompletar mientras escribe

Este tutorial agregará la función de autocompletar a medida que escribe. En el formulario en el que un usuario puede ingresar una respuesta a un hilo, queremos que la aplicación comience automáticamente a buscar nombres de usuario para elegir cuando ingresa una cadena que comienza con el símbolo @. Hay un plugin de jQuery construido para este propósito exacto llamada At.js. Además del autocompletado de nombres de usuario, el complemento también ofrece caracteres emoji como emoticones, tazas de café y más. Dado que el formulario de respuesta es en realidad un componente de VueJS, eso significa que tendremos que importar el complemento jQuery al componente para que funcione. Juguemos con At.js ahora.

Instalación de At.js

Antes de que podamos usar el complemento, necesitaremos instalarlo. Instalamos at.js y jquery.caret usando el administrador de paquetes de hilo aquí.

vagrant @ homestead: ~ / Code / forumio $ yarn agregar at.js guardar 
vagrant @ homestead: ~ / Code / forumio $ yarn agregar jquery.caret guardar

Importar el complemento jQuery al componente Vue

En el componente que queremos hacer uso del complemento At.js, necesitaremos hacer uso de una declaración de importación. En el área de script del componente NewReply, así es como se importan esos dos módulos.

1
2
3
<script>
    import 'jquery.caret';
    import 'at.js';

Bootup The Watcher

Como ahora estamos trabajando con Javascript, necesitaremos iniciar el observador.

vagrant @ homestead: ~ / Code / forumio $ yarn run watch-poll

Ahora que actualizamos los archivos en cuestión, el paquete web hace su trabajo en segundo plano, recompilando y minimizando sobre la marcha.

Aprovechamiento de At.js en el componente Vue

Ahora que el código está disponible para su uso dentro del propio componente Vue, podemos agregar algunas marcas para hacer uso de la funcionalidad de autocompletar. Hemos resaltado el marcado en cuestión aquí.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
    <div>
        <div v-if="signedIn">
            <div class="form-group">
                <textarea name="body"
                          id="body"
                          class="form-control"
                          placeholder="Have something to say?"
                          rows="5"
                          required
                          v-model="body"></textarea>
            </div>
 
            <button type="submit"
                    class="btn btn-default"
                    @click="addReply">Post
            </button>
        </div>
 
        <p class="text-center" v-else>
            Please <a href="/login">sign in</a> to participate in this
            discussion.
        </p>
    </div>
</template>
 
<script>
    import 'jquery.caret';
    import 'at.js';
 
    export default {
        data() {
            return {
                body: ''
            };
        },
 
        computed: {
            signedIn() {
                return window.App.signedIn;
            }
        },
 
        mounted() {
            jQuery('#body').atwho({
                at: "@",
                delay: 750,
                callbacks: {
                    remoteFilter: function (query, callback) {
                        $.getJSON("/api/users", {name: query}, function (usernames) {
                            callback(usernames)
                        });
                    }
                }
            });
        },
 
        methods: {
            addReply() {
                axios.post(location.pathname + '/replies', {body: this.body})
                    .catch(error => {
                        flash(error.response.data, 'danger');
                    })
                    .then(({data}) => {
                        this.body = '';
 
                        flash('Your reply has been posted.');
 
                        this.$emit('created', data);
                    });
            }
        }
    }
</script>

Examinemos cómo funciona esto. En primer lugar, ponemos esto dentro de la función VueJS montada (). Esto se activa después de que se haya montado la instancia de Vue, cuando el elemento de destino original se reemplaza con el elemento Vue.

A continuación, usamos jQuery para apuntar al elemento al que queremos agregar la funcionalidad de autocompletar. A través de jQuery ('# body'), apuntamos al elemento que tiene la identificación de 'body'. Tenga en cuenta que el <textarea> de este componente de Vue tiene una identificación de 'cuerpo', por lo que esto es con lo que funciona el complemento at.js.

Después de esto, se llama al método atwho (). Esta es la función principal utilizada en la biblioteca at.js. Se pasa un objeto a la llamada de atwho (). La propiedad 'at' es donde se especifica un carácter para que el complemento actúe. En nuestro caso, se utiliza el símbolo @. La propiedad 'delay' toma un valor en milisegundos.

El siguiente es la propiedad 'callbacks' y aquí hay funciones configuradas para manejar y representar los datos. Dentro de la propiedad de devoluciones de llamada se encuentra la llamada a remoteFilter que at.js usa para obtener datos coincidentes del servidor para completar la función de sugerencia automática. De hecho, si cargamos una página de hilos y comenzamos a escribir en el área de texto, si ingresamos un símbolo @, podemos ver que las solicitudes ajax se disparan al servidor.
en mención en js autocompletar

Configurar la API de Laravel

El lado frontal de esto está más o menos en su lugar. Ahora necesitamos configurar un punto final en la API para que pueda responder a esas solicitudes de ajax. Lo que hará el punto final es buscar en la base de datos posibles coincidencias con el texto escrito y devolver esas posibles coincidencias a la interfaz. El front-end luego recorre los resultados y crea una lista de posibles coincidencias.

Agregar una ruta

Podemos agregar esta línea de código al final del archivo de rutas web.php.

1
Route::get('api/users', 'ApiUsersController@index');

Agregar una prueba

Agreguemos una prueba para este punto final de la API.

Dado que tenemos un usuario LilKim
Dado que tenemos un usuario LilJim
Dado que tenemos un usuario JoeBlow
Cuando se realiza una solicitud json
Entonces deberíamos tener 2 posibles coincidencias

1
2
3
4
5
6
7
8
function test_it_can_fetch_all_mentioned_users_starting_with_the_given_characters()
{
    create('AppUser', ['name' => 'LilKim']);
    create('AppUser', ['name' => 'LilJim']);
    create('AppUser', ['name' => 'JoeBlow']);
    $results = $this->json('GET', '/api/users', ['name' => 'Lil']);
    $this->assertCount(2, $results->json());
}

Ejecutar la prueba nos da una ReflectionException de "Class AppHttpControllersApiUsersController no existe"

vagabundo @ homestead: ~ / Code / forumio $ phpunit --filter test_it_can_fetch_all_mentmented_users_starting_with_the_given_characters
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

E 1/1 (100%)

Tiempo: 808 ms, memoria: 8,00 MB

Hubo 1 error:

1) TestsFeatureMentionUsersTest :: test_it_can_fetch_all_mentmented_users_starting_with_the_given_characters
ReflectionException: la clase AppHttpControllersApiUsersController no existe

¡Está bien! Todo lo que tenemos que hacer es construir un nuevo controlador. ¡Aquí vamos!

vagrant @ homestead: ~ / Code / forumio $ php artisan make: controller Api / UsersController
Controlador creado con éxito.

Tenga en cuenta cómo prefijamos el nombre del controlador con la cadena de 'Api'. Esto crea automáticamente un nuevo directorio para nuestros controladores API y coloca este nuevo UsersController en el directorio por nosotros. Ahora que nuestra clase está creada, podemos ejecutar la prueba una vez más.

vagabundo @ homestead: ~ / Code / forumio $ phpunit --filter test_it_can_fetch_all_mentmented_users_starting_with_the_given_characters
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

E 1/1 (100%)

Tiempo: 845 ms, memoria: 8,00 MB

Hubo 1 error:

1) TestsFeatureMentionUsersTest :: test_it_can_fetch_all_mentmented_users_starting_with_the_given_characters
BadMethodCallException: el método [índice] no existe en [AppHttpControllersApiUsersController].

Parece que nos falta el método index (). ¡Fácil solución!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
namespace AppHttpControllersApi;
 
use AppHttpControllersController;
use AppUser;
 
class UsersController extends Controller
{
    public function index()
    {
        
    }
}

El método de índice aún no hace nada, pero debería borrar el error anterior en la prueba y acercarnos un paso más al verde. Podemos ejecutar la prueba de nuevo para ver qué tenemos que hacer.

vagabundo @ homestead: ~ / Code / forumio $ phpunit --filter test_it_can_fetch_all_mentmented_users_starting_with_the_given_characters
PHPUnit 6.5.5 por Sebastian Bergmann y colaboradores.

F 1/1 (100%)

Tiempo: 810 ms, memoria: 10,00 MB

Hubo 1 falla:

1) TestsFeatureMentionUsersTest :: test_it_can_fetch_all_mentmented_users_starting_with_the_given_characters
Se devolvió JSON no válido de la ruta.

Ok, se devuelve un json no válido. Podemos arreglarlo. En primer lugar, ¿qué necesitamos que haga este método index ()? Bueno, va a hacer una consulta a la base de datos. Específicamente, va a consultar el modelo de usuario, por lo que debemos hacer uso de eso. Ahora, usaremos una cláusula "where" usando los datos pasados desde la interfaz. Una vez que se completa, devolvemos los resultados como json. Así es como debería verse ahora.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
namespace AppHttpControllersApi;
 
use AppHttpControllersController;
use AppUser;
 
class UsersController extends Controller
{
    public function index()
    {
        $search = request('name');
 
        return User::where('name', 'LIKE', "%$search%")
            ->take(5)
            ->pluck('name');
    }
}

Con eso, vemos mi color favorito. ¡VERDE!
La prueba de phpunit ahora pasa con VERDE

Eso significa que esto debería funcionar ahora en el navegador. Si lo intentamos, funciona. Las posibles coincidencias están apareciendo, ¡pero no como podríamos esperar!
tipo de trabajo

Adición de At.js CSS

Entonces, la razón por la que las cosas se ven raras hasta ahora es que no tenemos un estilo para formatear correctamente los resultados de la sugerencia automática. Sin embargo, podemos solucionarlo copiando el css que viene con at.js al directorio público de nuestra aplicación. Primero creamos el nuevo directorio dentro de public / css, luego copiamos el contenido.

vagrant @ homestead: ~ / Code / forumio $ mkdir public / css / vendor
vagrant @ homestead: ~ / Code / forumio $ cp node_modules / at.js / dist / css / jquery.atwho.css ./public/css/vendor/

Hacer referencia selectiva a una hoja de estilo

Ahora necesitamos hacer referencia a esa hoja de estilo para que el estilo tenga efecto en el formulario. Sin embargo, no necesitamos esta hoja de estilo en ningún otro lugar de la aplicación, por lo que debemos usarla solo cuando sea necesario. En realidad, esto es bastante fácil de hacer. En threads / show.blade.php agregaremos este marcado.

1
2
3
4
5
6
7
@extends('layouts.app')
 
@section('head')
    <link rel="stylesheet" href="/css/vendor/jquery.atwho.css">
@endsection
 
@section('content')

Ahora, en el archivo de diseño principal app.blade.php, podemos agregar la línea resaltada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>{{ config('app.name', 'Laravel') }}</title>
 
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    <script>
        window.App = {!! json_encode([
        'user' => Auth::user(),
        'signedIn' => Auth::check()
    ]) !!};
    </script>
 
    <!-- My Basic Styles -->
    <style>
        body {
            padding-bottom: 100px;
        }
 
        .level {
            display: flex;
            align-items: center;
        }
 
        .flex {
            flex: 1;
        }
 
        .mr-1 {
            margin-right: 1em;
        }
 
        [v-cloak] {
            display: none;
        }
    </style>
    @yield('head')
</head>
<body>
<div id="app">
    @include('layouts.nav')
 
    @yield('content')
    <flash class="alert-flash" message="{{ session('flash') }}"></flash>
</div>
 
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Esto nos permite agregar la hoja de estilo necesaria a pedido, por así decirlo. ¡¿Y mirarás eso ?! ¡Frio!
jquery autocompletar a medida que escribe ejemplo de trabajo

Vincular nombres de usuario

Lo último que podemos hacer en este tutorial es asegurarnos de que los nombres de usuario estén vinculados o envueltos en una etiqueta de anclaje al mencionar a un usuario. En el modelo Reply.php, podemos agregar una función pública para establecer el atributo del cuerpo de esa manera. Esto solo hace uso de una práctica expresión regular para crear un hipervínculo para los perfiles de usuario.

1
2
3
4
5
6
7
8
public function setBodyAttribute($body)
{
    $this->attributes['body'] = preg_replace(
        '/@([w-]+)/',
        '<a href="/profiles/$1">$0</a>',
        $body
    );
}

También necesitaremos hacer un pequeño ajuste en el componente Reply.vue. Tenga en cuenta que ahora usamos v-html en lugar de v-text.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="panel-body">
    <div v-if="editing">
        <div class="form-group">
            <textarea class="form-control" v-model="body"></textarea>
        </div>
 
        <button class="btn btn-xs btn-primary" @click="update">Update</button>
        <button class="btn btn-xs btn-link" @click="editing = false">Cancel</button>
    </div>
 
    <div v-else v-html="body"></div>
</div>

Ahora nuestros nombres de usuario se vinculan y podemos hacer clic para ver sus perfiles.
convertir el nombre de usuario en un enlace en el que se puede hacer clic