¿Cómo implementar autocompletar en Node.js?

Para los formularios de autocompletar, recomendaría Twitter typeahead , es muy simple, fácil de usar y potente. Al inicializar un typeahead usando el plugin jQuery typeahead.js, le pasa al método del plugin uno o más conjuntos de datos. La fuente de un conjunto de datos es responsable de calcular un conjunto de sugerencias para una consulta determinada.

Es fácil de usar, tenemos que importar el script, y al usar el selector de JavaScript o el selector JQuery podemos inicializar e invocar el typeahead.

Este es solo un ejemplo simple de cómo usar typeahead :

• ¿Cuáles son los elementos clave de un sitio web bien diseñado?
• ¿Cuáles son los desafíos técnicos comunes en el desarrollo de aplicaciones web móviles?
• ¿Qué cosas se requieren para hacer un sitio web en la plataforma Hubspot COS?
• ¿Cuál es el mejor software para usar para operar un sitio web privado de ropa de ventas flash?
• ¿Cómo debo leer HTML y CSS: diseñar y construir sitios web de manera efectiva?

Diseño de base de datos:

Cree cualquier base de datos en MySQL y pegue la siguiente consulta para crear una tabla dentro de esa base de datos.

• CREAR TABLA ‘nombre_usuario’
  (
  user_id INT (20) CLAVE PRIMARIA,
  first_name TEXT
  );
  
  Ponga algunos datos en eso usando el comando INSERT.

  Instalar paquetes:
  {
  “name”: “typeahead-search”,
  “versión”: “”,
  “dependencias”: {
  “express”: “*”,
  “ejs”: “*”,
  “mysql”: “*”
  }
  }

• Su carpeta debería verse así:
  —–Módulos_nodo
  | –Expresar
  | –Ejs
  | –Mysql
  —–JS
  | –Typeahead.min.js
  –puntos de vista
  | –Index.html
  —Package.json
  —Server.js

Código HTML y JS

Estamos utilizando la biblioteca typeahead.js para habilitar la función de búsqueda Ajax. Así que también tenemos que incluirlos en nuestro archivo HTML.

Para inicializar typeahead en la función JQuery:

• $ (documento) .ready (función () {
  $ (‘input.typeahead’). typeahead ({
  nombre: ‘typeahead’,
  remoto: ‘http: // localhost: 3000 / search? key =% QUERY’,
  límite: 10
  });
  });

Cuadro de búsqueda HTML:

Completar el archivo server.js que contiene el código para cargar el servidor, manejar la solicitud, manejar las operaciones de la base de datos y devolver la respuesta para una solicitud válida.
Nuestro primer trabajo es cargar las dependencias que queremos usar.

Server.JS

• var express = require (‘express’);
  aplicación var = express ();
  var mysql = require (‘mysql’);

Lo siguiente que debe hacer es definir la configuración de la aplicación. Estamos usando la carpeta ‘view’ para almacenar el código front-end y la carpeta JS para la biblioteca JavaScript, por lo que debemos decirle a express que lo haga usando el siguiente código.

Server.JS

• app.set (‘vistas’, __ dirname + ‘/ vistas’);
  app.use (express.static (__ dirname + ‘/ JS’));
  app.set (‘ver motor’, ‘ejs’);
  app.engine (‘html’, require (‘ejs’). renderFile);

Conexión a la base de datos MYSQL:

Server.JS

• conexión var = mysql.createConnection ({
  host: ‘Nombre del host; localhost para local ‘,
  usuario: ‘Nombre de usuario; raíz principalmente ‘,
  contraseña: ‘contraseña de MySQL; en blanco sobre todo “,
  base de datos: ‘Nombre de su base de datos’
  });
  connection.connect ();

Una vez que estamos conectados a la base de datos, nuestro trabajo es manejar el enrutador. El enrutador define el funcionamiento de la aplicación en diferentes escenarios. Estamos usando dos enrutadores aquí, uno para entregar la página de inicio de la aplicación, el segundo para extraer la clave de búsqueda y devolver el resultado.

Server.JS

• app.get (‘/’, function (req, res) {
  res.render (‘index.html’);
  });
  app.get (‘/ search’, function (req, res) {
  });

Server.JS

• app.get (‘/’, function (req, res) {
  res.render (‘index.html’);
  });
  app.get (‘/ search’, function (req, res) {
  connection.query (‘SELECCIONE nombre_deTABLE_NAME donde nombre_nombre como “%’ + req.query.key + ‘%”‘,
  función (err, filas, campos) {
  si (err) lanza err;
  datos var = [];
  para (i = 0; i <filas.longitud; i ++)
  {
  data.push (filas [i]. primer nombre);
  }
  res.end (JSON.stringify (datos));
  });
  });

Server.JS

• var server = app.listen (3000, function () {
  console.log (“Hemos iniciado nuestro servidor en el puerto 3000”);
  });

Para iniciar la aplicación, simplemente escriba en el terminal de Visual Studio Code:

• nodo Server.js

Para ejecutar la aplicación desde el navegador simplemente escriba:

• http: // localhost: 3000 /