HTML实现下拉框远程搜索可输入

最新推荐文章于 2024-06-07 19:03:53 发布

伱王哪跑

最新推荐文章于 2024-06-07 19:03:53 发布

阅读量1.9k

点赞数 4

分类专栏： html 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_51657546/article/details/131134509

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML实现下拉框远程搜索可输入

今天用html+js实现下拉框远程搜索数据，并且输入的数据也作为选项之一，该功能主要使用了常用的库是 Select2。首先，你需要在你的HTML页面中引入 Select2 库的CSS和JavaScript文件。可以在官方网站（https://select2.org/）下载或使用CDN链接。

html代码

<!DOCTYPE html>
<html>
<head>
    <title>下拉框示例</title>
    <link href="path/to/select2.css" rel="stylesheet">
    <script src="path/to/select2.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="buyerName"></select>

    <script>
        $(document).ready(function() {
            $("#buyerName").select2({
                placeholder: "请选择或输入",
                ajax: {
                    url: "your_backend_url", // 替换为你的后端接口URL
                    dataType: "json",
                    delay: 250,
                    data: function(params) {
                        return {
                            buyerName: params.term // 输入框中的值
                        };
                    },
                    processResults: function(data) {
                        var results = [];

                        // 根据返回的数据生成选项
                        for (var i = 0; i < data.length; i++) {
                            var option = {
                                id: data[i].name, // 选项的值
                                text: data[i].name // 选项的显示文本
                            };
                            results.push(option);
                        }

                        return {
                            results: results
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1 // 输入的最小长度，可以根据需要进行调整
            });

            $("#buyerName").on("select2:select", function(e) {
                var selectedOption = e.params.data;
                console.log(selectedOption);
            });
        });
    </script>
</body>
</html>