十分钟打造AutoComplete自动完成效果代码

AutoComplete自动完成效果是一种常见的交互式UI组件，它可以帮助用户快速找到他们正在寻找的内容。本文将提供详解如何在十分钟内打造AutoComplete自动完成效果的完整攻略，包括使用jQuery UI的autocomplete方法、使用Bootstrap的typeahead插件等。同时，本文还提供两个示例，演示如何使用jQuery UI和Bootstrap创建AutoComplete自动完成效果。

使用jQuery UI的autocomplete方法

要使用jQuery UI的autocomplete方法创建AutoComplete自动完成效果，需要引入jQuery和jQuery UI库，并在HTML中创建一个输入框。以下是使用jQuery UI的autocomplete方法创建AutoComplete自动完成效果的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>AutoComplete Demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>
</body>
</html>

在上面的示例代码中，我们引入了jQuery和jQuery UI库，并创建了一个输入框。我们使用jQuery UI的autocomplete方法将输入框转换为AutoComplete自动完成效果。我们将可用的标签存储在一个数组availableTags中，并将该数组作为source选项传递给autocomplete方法。

使用Bootstrap的typeahead插件

要使用Bootstrap的typeahead插件创建AutoComplete自动完成效果，需要引入jQuery、Bootstrap和typeahead库，并在HTML中创建一个输入框。以下是使用Bootstrap的typeahead插件创建AutoComplete自动完成效果的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>AutoComplete Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script>
        $(function() {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#tags").typeahead({
                source: availableTags
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="tags">Tags:</label>
                    <input type="text" class="form-control" id="tags">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在上面的示例代码中，我们引入了jQuery、Bootstrap和typeahead库，并创建了一个输入框。我们使用Bootstrap的typeahead插件将输入框转换为AutoComplete自动完成效果。我们将可用的标签存储在一个数组availableTags中，并将该数组作为source选项传递给typeahead方法。

综上所述，要在十分钟内打造AutoComplete自动完成效果，可以使用jQuery UI的autocomplete方法或Bootstrap的typeahead插件。可以使用示例代码更好地理解如何使用这些库创建AutoComplete自动完成效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：十分钟打造AutoComplete自动完成效果代码 - Python技术站

十分钟打造AutoComplete自动完成效果代码

使用jQuery UI的autocomplete方法

使用Bootstrap的typeahead插件

相关文章