En este artículo, repasaremos la opción Autocompletar enfoque automático en JqueryUI. jQuery UI Autocompletar opción de enfoque automático cuando se establece en verdadero, el primer elemento se enfocará automáticamente cuando se muestre el menú. El valor predeterminado es Falso.
Sintaxis:
$( ".selector" ).autocomplete({autoFocus: true }),
Enfoque: Primero, agregue los scripts jQuery Mobile necesarios para su proyecto.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax /libs/jqueryui/1.8.16/jquery-ui.js”></script>
<enlace href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness /jquery-ui.css” rel=”hoja de estilo” type=”texto/css” />
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.height {
height: 10px;
}
</style>
<script>
$(function() {
var list = [
"One",
"two",
"Three",
"Four",
];
$( "#gfg" ).autocomplete({
source: list,
autoFocus:false
});
});
</script>
</head>
<body>
<div class = "ui-widget">
<p>jQuery UI| autoFocus Element</p>
<p>GeeksforGeeks</p>
<label for = "gfg">Tags: </label>
<input id = "gfg">
</div>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>
.height {
height: 10px;
}
</style>
<script>
$(function() {
var list = [
"One",
"two",
"Three",
"Four",
];
$( "#gfg" ).autocomplete({
source: list,
autoFocus:true
});
});
</script>
</head>
<body>
<div class = "ui-widget">
<p>jQuery UI| autoFocus Element</p>
<p>GeeksforGeeks</p>
<label for = "gfg">Tags: </label>
<input id = "gfg">
</div>
</body>
</html>
Producción:
