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 artículo, vamos a aprender la opción FilterPlaceholder de jQuery Mobile Filterable . La opción filterPlaceholder establece el texto del marcador de posición como una sugerencia para la barra de búsqueda.
Sintaxis : la opción filterPlaceholder toma un valor de string y se puede inicializar de la siguiente manera:
$(".items").filterable({
filterPlaceholder: "Search bar",
});
-
Obtener la opción de marcador de posición de filtro
var filterPlaceholderOpt = $(".items") .filterable("option", "filterPlaceholder"); -
$(".items").filterable("option", "filterPlaceholder", "Search items");
Establecer la opción de marcador de posición de filtro
Vínculos de CDN : use los siguientes CDN para su proyecto de 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 este ejemplo, hemos establecido el texto del marcador de posición del filtro en » Barra de búsqueda «.
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 filterPlaceholder Option</h3>
<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({
filterPlaceholder: "Search bar",
});
</script>
</body>
</html>
Producción
Opción de marcador de posición de filtro filtrable de jQuery Mobile
Referencia: https://api.jquerymobile.com/filterable/#option-filterPlaceholder
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA