En este artículo, aprenderemos sobre el complemento Autocompletar jQuery Mobile que ayuda a los desarrolladores web o móviles a agregar un cuadro de búsqueda de autocompletar en sus proyectos.
Descargue los archivos precompilados necesarios del siguiente enlace y guárdelos en su carpeta de trabajo para su implementación. Tenga cuidado con las rutas de archivo adecuadas mientras las incluye en sus códigos fuente.
https://github.com/commadelimited/autoComplete.js
Ejemplo 1: El siguiente ejemplo muestra una función de búsqueda de autocompletar utilizando el complemento anterior, para una lista de países.
HTML
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1, maximum-scale=1,
user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--jQuery Mobile library for stylesheet -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="styles.css" />
<script
src="http://code.jquery.com/jquery-1.8.2.min.js">
</script>
<!--jQuery Mobile library-->
<script
src="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.js">
</script>
<!--jQuery Mobile Autocomplete plugin-->
<script src="jqm.autoComplete-1.5.2.js">
</script>
<script src="code.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header">
<h1>jQuery Mobile Autocomplete</h1>
</div>
<div data-role="content">
<h3>Local Simple Data</h3>
<p>
In this example autoComplete uses a local array of strings.</p>
<p>
The list contains strings with'Afganistan', 'Albania', 'Angola',
'Argentina',
'Madagascar', 'Malaysia',
'Bahrain', 'Bangladesh', 'Belarus', 'Belgium',
'Maldives', 'Mali', 'Mauritius', 'Mexico',
'Namibia', 'Nepal', 'Niger', 'Norway', 'Burundi', 'Oman',
'Canada', 'Cameroon', 'Burma', 'Pakistan', 'Panama', 'China',
'Peru', 'Croatia']
</p>
<p>
<input type="text" id="searchField" placeholder="Countries">
<ul id="suggestions" data-role="listview" data-inset="true">
</ul>
</p>
</div>
</div>
<script>
$("#mainPage").bind("pageshow", function(e) {
var dataList = ['Afganistan', 'Albania', 'Angola',
'Argentina',
'Madagascar', 'Malaysia',
'Bahrain', 'Bangladesh', 'Belarus', 'Belgium',
'Maldives', 'Mali', 'Mauritius', 'Mexico',
'Namibia', 'Nepal', 'Niger', 'Norway', 'Burundi',
'Oman',
'Canada', 'Cameroon', 'Burma', 'Pakistan', 'Panama',
'China',
'Peru', 'Croatia'];
$("#searchField").autocomplete({
target: $('#suggestions'),
source: dataList,
link: 'resultArray.html?term=',
minLength: 1,
matchFromStart: false
});
});
</script>
</body>
</html>
Archivo “resultArray.html”: A continuación se muestra el código para el archivo “resultArray.html” utilizado en el código anterior, que es el archivo de enlace utilizado en la parte javascript para el código HTML anterior.
html
<!DOCTYPE html> <html> <body> <h2>Result page </h2> <div data-role="page" id="mainPage"> <div data-role="content"> <p> I'm the result page for Country autocomplete search. </p> </div> </div> </body> </html>
Producción:
- Antes de la búsqueda:
- Después de la búsqueda:
Ejemplo 2: El siguiente ejemplo muestra una búsqueda de autocompletado de objetos en forma de «valor» y «etiqueta» para una lista que consta de nombres de países.
html
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1, maximum-scale=1,
user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.min.js">
</script>
<script src="jqm.autoComplete-1.5.2-min.js">
</script>
<script src="code.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header">
<h1>jQuery Mobile Autocomplete</h1>
</div>
<div data-role="content">
<h3>Callback Function</h3>
<p>
The autoComplete uses a local array of objects.
The function selects the new "data-autocomplete"
property on each anchor tag in the selected list.
</p>
<p>
<input type="text" id="searchFieldID"
placeholder="Countries">
<ul id="suggestions" data-role="listview"
data-inset="true"></ul>
</p>
</div>
</div>
<script>
$("#mainPage").bind("pageshow", function(e) {
var autocompleteData = $.parseJSON(
'[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},
{"value":"AS","label":"American Samoa"},{"value":"AZ","label":"Arizona"},
{"value":"AR","label":"Arkansas"},{"value":"CA","label":"California"},
{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},
{"value":"DE","label":"Delaware"},{"value":"DC","label":"District of Columbia"},
{"value":"FL","label":"Florida"},{"value":"GA","label":"Georgia"},
{"value":"GU","label":"Guam"},{"value":"HI","label":"Hawaii"},
{"value":"ID","label":"Idaho"},{"value":"IL","label":"Illinois"},
{"value":"IN","label":"Indiana"},{"value":"IA","label":"Iowa"},
{"value":"KS","label":"Kansas"},{"value":"KY","label":"Kentucky"},
{"value":"LA","label":"Louisiana"},{"value":"ME","label":"Maine"},
{"value":"MD","label":"Maryland"},{"value":"MA","label":"Massachusetts"},
{"value":"MI","label":"Michigan"},{"value":"MN","label":"Minnesota"},
{"value":"MS","label":"Mississippi"},{"value":"MO","label":"Missouri"},
{"value":"MT","label":"Montana"},{"value":"NE","label":"Nebraska"},
{"value":"NV","label":"Nevada"},{"value":"NH","label":"New Hampshire"},
{"value":"NJ","label":"New Jersey"},{"value":"NM","label":"New Mexico"},
{"value":"NY","label":"New York"},{"value":"NC","label":"North Carolina"},
{"value":"ND","label":"North Dakota"},
{"value":"NI","label":"Northern Marianas Islands"},
{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},
{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},
{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},
{"value":"SC","label":"South Carolina"},{"value":"SD","label":"South Dakota"},
{"value":"TN","label":"Tennessee"},{"value":"TX","label":"Texas"},
{"value":"UT","label":"Utah"},{"value":"VT","label":"Vermont"},
{"value":"VI","label":"Virgin Islands"},{"value":"VA","label":"Virginia"},
{"value":"WA","label":"Washington"},{"value":"WV","label":"West Virginia"},
{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]');
$("#searchFieldID").autocomplete({
target: $('#suggestions'),
source: autocompleteData,
callback: function(e) {
var $a = $(e.currentTarget);
$('#searchFieldID').
val( $a.data('autocomplete').value );
$("#searchFieldID").autocomplete('clear');
},
link: 'resultArray.html?term=',
minLength: 1
});
});
</script>
</body>
</html>
Nota: El código para el archivo «resultArray.html» que se usa en la parte de JavaScript es el mismo que se usó en el primer ejemplo.
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA