select2动态加载数据，智能搜索（类似百度搜索）

最新推荐文章于 2023-08-10 11:26:47 发布

liuxufeiyang000

最新推荐文章于 2023-08-10 11:26:47 发布

阅读量1w

点赞数 1

分类专栏： ajax MVC/asp.net

本文链接：https://blog.youkuaiyun.com/liuxufeiyang000/article/details/53673686

版权

这篇博客介绍了如何利用autocomplete和select2两种控件实现动态加载数据的智能搜索功能，类似于百度搜索。通过在后台根据输入条件进行模糊查询，将结果动态显示在前端。示例包括了对这两个控件的引用、脚本设置以及HTML页面和后台函数的配合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：类似于百度搜索，有很多控件可以实现，本文着重介绍2个，autocomplete和select2

本文都是以动态加载数据为例，根据输入的条件，在后台模糊查询获取数据，动态加载到控件中。

1、autocomplete

引用

解释：注意版本

脚本

<script type="text/javascript">  
        function getMaterialInfos(e) {  
            var $meterialTag = $("#materialTags");  
            $.ajax({  
                url: "@Url.Action("GetMaterialTest")",  
                type: "Get",  
                data: { "likeId": $meterialTag.val() },  
                success: function (data) {  
                    if (data != null) {  
                        $meterialTag.autocomplete({  
                            source: data  
                        });  
                    }  
                }  
            });  
        }  
        $(function () {  
            $('#materialTags').keyup(function () { getMaterialInfos() });  
        })  
    </script>

解释：materialTags是html中的input标签的id；GetMaterialTest()是后台函数名；likeId是后台函数的参数名