如何使用jQuery UI制作基本的autocomplete功能

jQuery UI Autocomplete可以用来为网页中的文本字段提供autocomplete的支持。当autocomplete选项被作为一个数组给autocomplete器显示为选择时，本地autocomplete器被使用。

方法：首先，添加你的项目所需的jQuery UI脚本。

<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” />

示例:

<!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,
                });
            });
        </script>
    </head>
  
    <body>
        <div class="ui-widget">
            <p>GeeksforGeeks</p>
  
            <label for="gfg">Tags: </label>
            <input id="gfg" />
        </div>
    </body>
</html>

输出:

如何使用jQuery UI制作基本的autocomplete功能？