1. Python技术站首页
  2. jquery

JavaScript自动完成或建议功能

• jquery

现在我将详细讲解JavaScript自动完成或建议功能的完整攻略。

什么是JavaScript自动完成或建议功能？

JavaScript自动完成或建议功能是一种使得用户在快速输入信息的同时显示可能与其输入相匹配的自动建议的功能。例如，当用户在搜索框中键入“谷歌”，搜索引擎会自动显示可能的建议，如“谷歌新闻”、“谷歌图片”等等。

在JavaScript中，我们通常使用下拉列表框或者文本框自动完成的形式来实现自动完成或建议功能。

如何实现JavaScript自动完成或建议功能？

以下是在Web应用程序中实现JavaScript自动完成或建议功能的步骤：

  1. 获取输入框。

首先，获取需要包含自动完成或建议内容的文本输入框对象。

var inputBox = document.getElementById("input-txt");
  1. 创建建议列表。

创建一个新的元素作为建议列表。因为建议列表的样式和位置可以有所不同，所以需要根据应用程序的需要来设置它的属性。

var suggestionList = document.createElement("ul");
suggestionList.setAttribute("id", "suggestion-list");
suggestionList.setAttribute("class", "suggestion-list");
inputBox.parentNode.appendChild(suggestionList);
  1. 获取建议数据。

获取需要用于建议的数据。可以通过数据库查询、API调用或者本地JavaScript数组来获取数据。

var suggestionData = ["Apple", "Google", "Microsoft", "Facebook", "Amazon"];
  1. 监听文本输入框事件。

监听文本输入框的变化事件，例如“keydown”、“keypress”、“keyup”等。

inputBox.addEventListener("keyup", showSuggestions);
  1. 显示建议列表。

创建函数showSuggestions，获取到用户输入的文本后，使用DOM操作将自动完成或建议的选项添加到建议列表中。

function showSuggestions() {
  var userInput = inputBox.value;
  suggestionList.innerHTML = "";
  if (userInput.length > 0) {
    for (var i = 0; i < suggestionData.length; i++) {
      if (suggestionData[i].toLowerCase().indexOf(userInput.toLowerCase()) != -1) {
        var suggestionItem = document.createElement("li");
        suggestionItem.setAttribute("class", "suggestion-item");
        suggestionItem.innerHTML = suggestionData[i];
        suggestionList.appendChild(suggestionItem);
      }
    }
  }
}
  1. 显示或隐藏建议列表。

当用户在输入框中键入或按下箭头键时，可以通过DOM添加或删除“suggestion-list”类来显示或隐藏建议列表。

inputBox.addEventListener("keydown", function(event) {
  if (event.keyCode == 27) {
    hideSuggestions();
  } else if (event.keyCode == 38) {
    event.preventDefault();
    moveSelection("up");
  } else if (event.keyCode == 40) {
    event.preventDefault();
    moveSelection("down");
  } else if (event.keyCode == 13) {
    event.preventDefault();
    if (selectedSuggestion) {
      inputBox.value = selectedSuggestion.innerHTML;
      hideSuggestions();
    }
  } else {
    showSuggestions();
  }
});

示例说明

示例一

以下是实现自动完成文本框的JavScript代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript自动完成或建议功能</title>
<style> 
.suggestion-list {
    position: absolute;
    z-index: 9999;
    width: 220px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;;
    border: 1px solid #d4d4d4;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
} 
.suggestion-item {
    cursor: pointer;
    list-style-type: none;
    padding: 8px 10px;
    color: #666;
}
.suggestion-item:hover {
    background-color: #f8f8f8;
}
</style>
</head>
<body>
    <input type="text" id="input-txt">
    <script>
        var inputBox = document.getElementById("input-txt");
        var suggestionList = document.createElement("ul");
        suggestionList.setAttribute("id", "suggestion-list");
        suggestionList.setAttribute("class", "suggestion-list");
        inputBox.parentNode.appendChild(suggestionList);

        var suggestionData = ["Apple", "Google", "Microsoft", "Facebook", "Amazon"];

        function showSuggestions() {
            var userInput = inputBox.value;
            suggestionList.innerHTML = "";
            if (userInput.length > 0) {
                for (var i = 0; i < suggestionData.length; i++) {
                    if (suggestionData[i].toLowerCase().indexOf(userInput.toLowerCase()) != -1) {
                        var suggestionItem = document.createElement("li");
                        suggestionItem.setAttribute("class", "suggestion-item");
                        suggestionItem.innerHTML = suggestionData[i];
                        suggestionList.appendChild(suggestionItem);
                    }
                }
            }
        }

        inputBox.addEventListener("keyup", showSuggestions);

        function moveSelection(direction) {
            var suggestionItems = document.getElementsByClassName("suggestion-item");
            if (selectedSuggestion) {
                selectedSuggestion.setAttribute("class", "suggestion-item");
                if (direction == "up") {
                    selectedSuggestion = selectedSuggestion.previousSibling;
                } else {
                    selectedSuggestion = selectedSuggestion.nextSibling;
                }
            } else {
                selectedSuggestion = suggestionItems[0];
            }
            if (selectedSuggestion) {
                selectedSuggestion.setAttribute("class", "suggestion-item suggestion-selected");
                inputBox.value = selectedSuggestion.innerHTML;
            }
        }

        function hideSuggestions() {
            suggestionList.className = "suggestion-list hide";
        }

        function showSuggestions() {
            var userInput = inputBox.value;
            suggestionList.innerHTML = "";
            if (userInput.length > 0) {
                for (var i = 0; i < suggestionData.length; i++) {
                    if (suggestionData[i].toLowerCase().indexOf(userInput.toLowerCase()) != -1) {
                        var suggestionItem = document.createElement("li");
                        suggestionItem.setAttribute("class", "suggestion-item");
                        suggestionItem.innerHTML = suggestionData[i];
                        suggestionList.appendChild(suggestionItem);
                    }
                }
                suggestionList.className = "suggestion-list show";
            } else {
                suggestionList.className = "suggestion-list hide";
            }
        }

        var selectedSuggestion;
        inputBox.addEventListener("keydown", function(event) {
            if (event.keyCode == 27) {
                hideSuggestions();
            } else if (event.keyCode == 38) {
                event.preventDefault();
                moveSelection("up");
            } else if (event.keyCode == 40) {
                event.preventDefault();
                moveSelection("down");
            } else if (event.keyCode == 13) {
                event.preventDefault();
                if (selectedSuggestion) {
                    inputBox.value = selectedSuggestion.innerHTML;
                    hideSuggestions();
                }
            } else {
                showSuggestions();
            }
        });
    </script>
</body>
</html>

该示例中，本地数据["Apple", "Google", "Microsoft", "Facebook", "Amazon"]被用作自动完成选项。在文本框内键入内容时，会自动显示并过滤选项。通过上下箭头选择选项，按回车键后选中项目将填写在输入框内。

示例二

以下是使用jQuery实现自动完成的示例代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery自动完成或建议功能</title>
<style>
.suggestion-list {
    position: absolute;
    z-index: 9999;
    width: 220px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;;
    border: 1px solid #d4d4d4;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.suggestion-item {
    cursor: pointer;
    list-style-type: none;
    padding: 8px 10px;
    color: #666;
}
.suggestion-item:hover {
    background-color: #f8f8f8;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var suggestionData = ["Apple", "Google", "Microsoft", "Facebook", "Amazon"];

    $("#input-txt").on("keyup", function() {
        var userInput = $(this).val();
        var suggestionList = $("#suggestion-list");
        suggestionList.empty();
        if (userInput.length > 0) {
            for (var i = 0; i < suggestionData.length; i++) {
                if (suggestionData[i].toLowerCase().indexOf(userInput.toLowerCase()) != -1) {
                    var suggestionItem = $("<li></li>").addClass("suggestion-item").text(suggestionData[i]);
                    suggestionList.append(suggestionItem);
                }
            }
            suggestionList.show();
        } else {
            suggestionList.hide();
        }
    });

    $(document).on("click", ".suggestion-item", function() {
        var selectedSuggestion = $(this).text();
        $("#input-txt").val(selectedSuggestion);
        $("#suggestion-list").hide();
    });

    $(document).on("keydown", function(event) {
        var suggestionList = $("#suggestion-list");
        var selectedSuggestion = suggestionList.find(".suggestion-selected");

        if (event.keyCode == 27) {
            suggestionList.hide();
        } else if (event.keyCode == 38) {
            event.preventDefault();
            if (selectedSuggestion.length > 0) {
                selectedSuggestion.removeClass("suggestion-selected");
                selectedSuggestion = selectedSuggestion.prev();
            } else {
                selectedSuggestion = suggestionList.children().last();
            }
            selectedSuggestion.addClass("suggestion-selected");
            $("#input-txt").val(selectedSuggestion.text());
        } else if (event.keyCode == 40) {
            event.preventDefault();
            if (selectedSuggestion.length > 0) {
                selectedSuggestion.removeClass("suggestion-selected");
                selectedSuggestion = selectedSuggestion.next();
            } else {
                selectedSuggestion = suggestionList.children().first();
            }
            selectedSuggestion.addClass("suggestion-selected");
            $("#input-txt").val(selectedSuggestion.text());
        } else if (event.keyCode == 13) {
            event.preventDefault();
            if (selectedSuggestion.length > 0) {
                $("#input-txt").val(selectedSuggestion.text());
            }
            suggestionList.hide();
        }
    });
});
</script>
</head>
<body>
    <input type="text" id="input-txt">
    <ul id="suggestion-list" class="suggestion-list"></ul>
</body>
</html>

该示例中，与前面示例一样，本地数据["Apple", "Google", "Microsoft", "Facebook", "Amazon"]被用作自动完成选项。当文本框中键入内容时，使用键盘箭头键进行选择。按回车键确认后填写目标文本到文本框中。

希望这些示例对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript自动完成或建议功能 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月12日
下一篇 2023年5月12日

相关文章

  • jQWidgets jqxTreeGrid collapseRow()方法

    以下是关于 jQWidgets jqxTreeGrid 的 collapseRow() 方法的完整攻略： jQWidgets jqxTreeGrid collapseRow() 方法 collapseRow() 方法用于折叠 jqxTreeGrid 组件中的指定行。该方法会将指定行的子行隐藏，并将该行的展开状态设置为折叠状态。 语法 $(‘#jqxTreeG…

    jquery 2023年5月11日
    00

  • jQWidgets jqxLayout destroy()方法

    jQWidgets jqxLayout destroy()方法攻略 简介 jQWidgets 是一个基于 jQuery 的 UI 组件库，提供了丰富的 UI 组件和工具，可于创建现代化应用程序。 jqxLayout 布局组件用于灵活的布局，可用于构建复杂的用户界面。本攻略将详细介绍 jqxLayout 的 destroy() 方法，包括 destroy() …

    jquery 2023年5月10日
    00

  • jQWidgets jqxGrid autoshowfiltericon 属性

    以下是关于“jQWidgets jqxGrid autoshowfiltericon 属性”的完整攻略，包含两个示例说明： 简介 jqxGrid 控件的 autoshowfiltericon 属性用于控表格中筛选图标是否自动显示。当该属性设置为 true 时，表格中的筛选图标将自动显示。当该属性设置 false 时，表格的筛选图标将不会自动显示。 完整攻略 …

    jquery 2023年5月10日
    00

  • jQuery Mobile Pagecontainer移除事件

    jQuery Mobile Pagecontainer是一种用于处理移动设备上网页应用页面导航的工具，利用该工具可以实现快速定位到目标页面、进行数据预加载等功能。在使用Pagecontainer时，经常需要根据需要动态地添加或移除页面元素。本文将详细讲解如何使用jQuery Mobile Pagecontainer移除事件。 1. Pagecontainer…

    jquery 2023年5月12日
    00

  • jQWidgets jqxScheduler scrollBarSize属性

    当在 jqxScheduler 控件上启用滚动条时，可以使用 scrollBarSize 属性来配置滚动条的宽度和高度。该属性通常用于定制滚动条的大小，以适应不同的界面设计。 下面是详细的攻略，包括该属性的用途、值以及代码示例： 什么是scrollBarSize属性 scrollBarSize 属性是 jqxScheduler 控件的一个配置项，可以用来设置…

    jquery 2023年5月11日
    00

  • EasyUI jQuery messager widget

    下面是 EasyUI jQuery messager widget 的完整攻略： 简介 EasyUI jQuery messager widget 是基于 jQuery 和 EasyUI 构建的消息框插件，用于快速创建消息、提示、警告、错误等各种类型的消息框，样式美观、易于使用。 安装和引入 可以使用以下方法安装 EasyUI jQuery messager…

    jquery 2023年5月13日
    00

  • jQWidgets jqxDataTable可编辑属性

    以下是关于“jQWidgets jqxDataTable可编辑属性”的完整攻略，包含两个示例说明： 简介 jqxDataTable 是 jQWidgets 的一个控件，用于显示和编辑表格数据。jqxDataTable 可以通过设置 editable 属性来启用表格的编辑功能。 详细攻略 以下是 jqxDataTable 控件的可编辑属性的详细攻略： 使用 e…

    jquery 2023年5月11日
    00

  • jQuery基于muipicker实现仿ios时间选择

    接下来我将详细讲解“jQuery基于muipicker实现仿ios时间选择”的完整攻略。 1. 了解muipicker muipicker是一款基于mui框架的移动端时间选择器插件，支持选择年、月、日、时、分、秒等多个时间维度。具体使用方法可以参考官方文档：https://dev.dcloud.net.cn/mui/ui/#picker。 2. 仿ios时间…

    jquery 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部