jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear aplicaciones y sitios web receptivos accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio. Filterable es un widget que puede filtrar los hijos de cualquier elemento. Un formulario, una lista, etc. se pueden filtrar con la ayuda de filterable. Aparece una barra de búsqueda en la parte superior de la Lista donde se escribe el texto de búsqueda.
En este tutorial, vamos a aprender la opción de entrada filtrable de jQuery Mobile. La opción de entrada solicita el elemento o elemento que se utilizará como entrada para el texto de búsqueda para filtrar elementos. Hay un campo de texto de entrada predeterminado, pero también podemos usar un campo de texto personalizado usando la opción de entrada.
Sintaxis: la opción de entrada toma una string/elemento/jQuery que se utilizará como campo de entrada .
$(".items").filterable({
input: "#input-for-filtering",
});
-
Para obtener la opción de entrada después de la inicialización, use la siguiente sintaxis.
var inputOpt = $(".items").filterable("option", "input"); -
Para establecer la opción de entrada después de la inicialización, use la siguiente sintaxis.
$(".items").filterable("option", "input", "#input-for-filtering");
Vínculos de CDN : use los siguientes CDN para el proyecto jQuery Mobile.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo : en el siguiente ejemplo, hemos utilizado un elemento de entrada diferente para la opción de entrada que tiene una identificación . En la opción, hemos proporcionado la identificación del elemento de entrada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h1 style="color:green; text-align: center;">
GeeksforGeeks
</h1>
<h3 style="text-align: center;">
jQuery Mobile Filterable input Option</h3>
<label for="search">GFG Search</label>
<input type="text"
name="search" id="gfgsearch">
<ul class="items">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming
</a>
</li>
</ul>
<script>
$(".items").filterable({
input: "#gfgsearch",
});
</script>
</body>
</html>
Producción
Opción de entrada filtrable de jQuery Mobile
Referencia: https://api.jquerymobile.com/filterable/#option-input
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA