JavaScript 自动完成/建议功能

在本文中，我们将制作一个JavaScript自动完成/建议功能。有很多方法可以实现JavaScript的自动完成功能。我们将针对其中两种方法。一种是使用原生JavaScript，另一种是使用像jQuery这样的框架。

先决条件：

HTML
JavaScript
jQuery基础知识

使用原生JavaScript（无框架）： 这种方法的结果显示速度比使用框架的方法更快。

重要的函数：

getElementsByTagName()方法 : 用于按HTML标签名称获取元素。
createElement(“type”)方法 : 用于创建给定类型的元素。
appendChild(node)方法 : 将传递的节点附加到所附加的父节点的末尾。

示例1： 在此示例中，我们将使用纯JavaScript来进行建议。

<!DOCTYPE html>
<html>
<head>
    <title>
        Auto complete using Pure Javascript
    </title>
</head>
 
<body>
    <!-- Onkeyup calls the function everytime 
        a key is released -->
    <input type="text" list="datalist"
        onkeyup="ac(this.value)">
 
    <!-- This data list will be edited 
        through javascript -->
    <datalist id="datalist">
        <option value="Delhi"></option>
        <option value="Ahemdabad"></option>
        <option value="Punjab"></option>
        <option value="Uttar Pradesh"></option>
        <option value="Himachal Pradesh"></option>
        <option value="Karnataka"></option>
        <option value="Kerala"></option>
        <option value="Maharashtra"></option>
        <option value="Gujrat"></option>
        <option value="Rajasthan"></option>
        <option value="Bihar"></option>
        <option value="Tamil Nadu"></option>
        <option value="Haryana"></option>
    </datalist>
 
    <script type="text/javascript">
        let tags = [
            "Delhi",
            "Ahmedabad",
            "Punjab",
            "Uttar Pradesh",
            "Himachal Pradesh",
            "Karnataka",
            "Kerala",
            "Maharashtra",
            "Gujrat",
            "Rajasthan",
            "Bihar",
            "Tamil Nadu",
            "Haryana"
        ];
 
        /* list of available options */
        let n = tags.length; // length of datalist tags
 
        function ac(value) {
 
            // Setting datalist empty at the start 
            // of function. If we skip this step, 
            // same name will be repeated
            document.getElementById('datalist').innerHTML = '';
             
            // Input query length
            l = value.length;
             
            for (let i = 0; i < n; i++) {
 
                // Comparing if input string is existing
                // in tags[i] string
                if (((tags[i].toLowerCase()).indexOf(
                value.toLowerCase())) > -1) {
                    let node = document.createElement("option");
                    let val = document.createTextNode(tags[i]);
                    node.appendChild(val);
 
                    // Creating and appending new elements
                    // in data list
                    document.getElementById("datalist")
                        .appendChild(node);
                }
            }
        }
    </script>
</body>
</html>

输出：

JavaScript 自动完成/建议功能

使用jQuery： jQuery是一个跨平台的JavaScript库，旨在简化HTML的客户端脚本编写。它具有内建的自动补全函数，需要一个id和一个可用标签列表。

示例2： 在这个示例中，我们将使用jQuery来做出建议。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <title>Autocomplete using jQuery</title>
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="/resources/demos/style.css">
    <script src=
        "https://code.jquery.com/jquery-1.12.4.js">
    </script>
    <script src=
        "https://code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
 
    <script>
         $(function () { /* Making a list of available tags */ let tags = [ "Delhi", "Ahmedabad", "Punjab", "Uttar Pradesh", "Himachal Pradesh", "Karnataka", "Kerala", "Maharashtra", "Gujrat", "Rajasthan", "Bihar", "Tamil Nadu", "Haryana" ]; /* #the tags is the id of the input element source: tags is the list of available tags*/$ ("#tags").autocomplete({
                source: tags
            });
        });
    </script>
</head>
 
<body>
    <div class="ui-widget">
        <input id="tags">
    </div>
</body>
</html>

输出:

JavaScript 自动完成/建议功能