En este artículo, aprenderemos cómo diseñar un widget de cuadro de búsqueda utilizando el widget de cuadro de búsqueda jQuery EasyUI que permite al usuario buscar los datos buscando el valor. Easy UI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
Descarga EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
var a = $(".selector").searchbox ({
});
Propiedades:
- altura : La altura del componente.
- ancho : El ancho del componente.
- aviso : El mensaje de aviso que se mostrará en el cuadro de entrada.
- value : El valor a ser ingresado
- menu : El menú de tipo de búsqueda.
- buscador : La función de buscador se llamará cuando el usuario presione el botón de búsqueda o presione la tecla ENTER.
- disabled : esta propiedad se utiliza para deshabilitar el componente.
Métodos:
- reset : Resetea el valor.
- clear : Borra el valor.
- enable : Habilita el cuadro de búsqueda
- destroy : Destruye el cuadro de búsqueda.
- disabled : Deshabilita el cuadro de búsqueda.
- redimensionar : Redimensiona el cuadro de búsqueda
- selectName: Selecciona el nombre del tipo de búsqueda actual.
- getValue: Devuelve el nombre del tipo de búsqueda actual
- setValue: establece el nombre del tipo de búsqueda actual
- cuadro de texto: Devuelve el objeto cuadro de texto.
- menú: Devuelve el objeto de menú de tipo de búsqueda.
- options : Devuelve el objeto de opciones.
Vínculos de CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–Bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”> </script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Ejemplo:
HTML
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <!--jQuery library of EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> </head> <body> <h1>GeeksforGeeks</h1> <h3>Easy UI | searchbox widget</h3> <input id="ss" class="easyui-searchbox" style="width:300px" data-options="menu:'#men'"> <div id="men" style="width:120px"> <div>GFG1</div> <div>GFG2</div> </div> </body> </html>
Producción:
Referencia: http://www.jeasyui.com/documentation/