2022bootstrap3-typeahead自动补全教程

南桥秋风

已于 2022-09-30 21:35:13 修改

阅读量224

点赞数

分类专栏：自动补全插件文章标签：前端 javascript 开发语言

于 2022-09-30 21:24:53 首次发布

本文链接：https://blog.csdn.net/weixin_45773002/article/details/127129167

版权

自动补全插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

废话少说，直接上测试代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!--  JQUERY -->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--  BOOTSTRAP -->
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--TYPEAHEAD-->
    <script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
    <title>演示自动补全插件</title>
    <script type="text/javascript">
        $(function () {
            //当容器加载完成之后，对容器调用工具函数
            $("#customerName").typeahead({
                source:['京东商城','阿里巴巴','百度网络科技公司','字节跳动','动力节点']
            });
        });
    </script>
</head>
<body>
<input type="text" id="customerName">
</body>
</html>

在使用上述代码时，一定要引入插件！！！,如下图所示：
在这里插入图片描述
插件地址在：https://download.csdn.net/download/weixin_45773002/86543894?spm=1001.2014.3001.5503
测试效果图如下：

上面的代码只是针对一个确定的字段来设置的，如果是从数据库查找的字段，上面的代码就不适用了，可以使用下面的代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!--  JQUERY -->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!--  BOOTSTRAP -->
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--TYPEAHEAD-->
    <script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
    <title>演示自动补全插件2</title>
    <script type="text/javascript">
        $(function () {
            //当容器加载完成之后，对容器调用工具函数
            $("#customerName").typeahead({
                source:function (jquery,process) {//每次键盘弹起，都自动触发本函数；我们可以向后台送请求，查询客户表中所有的名称，把客户名称以[]字符串形式返回前台，赋值给source
                                                   //process：是个函数，能够将['xxx','xxxxx','xxxxxx',.....]字符串赋值给source，从而完成自动补全
                                                    //jquery：在容器中输入的关键字
                    //var customerName=$("#customerName").val();
                    //发送查询请求
                    $.ajax({
                        url:'workbench/transaction/queryCustomerNameByName.do',
                        data:{
                            customerName:jquery
                        },
                        type:'post',
                        dataType:'json',
                        success:function (data) {//['xxx','xxxxx','xxxxxx',.....]
                            process(data);
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
<input type="text" id="customerName">
</body>
</html>