jQuery UI 自动完成自动对焦选项(1)

📌 相关文章

📜 jQuery UI 自动完成自动对焦选项(1)

📅 最后修改于: 2023-12-03 15:32:11.691000 🧑 作者: Mango

jQuery UI 自动完成自动对焦选项

简介

jQuery UI自动完成（Autocomplete）是一个可定制且易于实现的自动完成组件，可添加到任何输入字段中。自动完成组件允许输入框上输入字符时，动态地提供一些关联的数据项，作为帮助提供选择的菜单。

在这里，我们将重点介绍jQuery UI自动完成组件的自动对焦选项。自动对焦选项可以让你在打开自动完成菜单时自动设定光标焦点在菜单的第一项上。

实现步骤

首先，你需要在你的页面引入jQuery UI库，如下所示：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

接下来，你需要创建一个输入框，并初始化自动完成组件，如下所示：

<input id="myInput">
<script>
  $( function() {
    $( "#myInput" ).autocomplete({
      source: [ "Java", "JavaScript", "Python", "Ruby", "Swift" ]
    });
  } );
</script>

现在，你需要在自动完成初始化代码中添加自动对焦选项，如下所示：

$( function() {
  $( "#myInput" ).autocomplete({
    source: [ "Java", "JavaScript", "Python", "Ruby", "Swift" ],
    autoFocus: true
  });
} );

注意，这里我们将autoFocus设置为true。

示例

在这个示例中，我们演示了一个基本的自动完成组件，在用户在输入框中输入字符时会提供一些关联的数据项。我们还将演示如何使用自动对焦选项让菜单自动定位在第一项上。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Auto focus demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .ui-autocomplete-loading {
      background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
  </style>
  <script>
  $( function() {
    $( "#myInput" ).autocomplete({
      source: [ "Java", "JavaScript", "Python", "Ruby", "Swift" ],
      autoFocus: true
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="myInput">Choose a programming language: </label>
  <input id="myInput">
</div>
 
 
</body>
</html>

结论

到这里，我们就实现了jQuery UI自动完成自动对焦选项的功能。自动对焦选项可以方便地让用户在打开自动完成菜单时直接选择菜单中的第一项，提高用户体验。要注意的是，如果你不想让自动对焦选项开启，将autoFocus选项设置为false即可。