百度搜索提示效果

百度搜索框输入几个字，就会出现常用搜索的提示项用,使用onkeyup来触发事件

通过append添加标签实现效果,连接数据库,用json传输对象,显示提示.

效果:

用到的包:

代码:

web:

<input id="search" onkeyup="search()" type="text" name="search"/>

触发事件:

function search() {
    //如果输入框没有内容，直接隐藏div
    if($("#search").val()==''){
        $("#show").empty();
    }else {
        $.get('long', {"name2": $("#search").val()}, function (data) {
            //清空div中的子元素
            $("#show").empty();
            for (var c of data) {
                //在id为show的div中追加子元素
                $("#show").append("<div class='qt'>" + c.name + "</div>");
            }
        }, 'json');
    }
};

java代码:

@WebServlet("/long")
public class Test extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

Service:

继承工具类BaseDao

Serviceimpl BaseDao {
List<Path01> (String str)
{
   }

Path01类:

存储数据库传来的数据

public class Path01 {
    
}

工具类:

不用太了解含义,了解使用方法即可

public class BaseDao<T> {

    QueryRunner queryRunner = new QueryRunner();

    //通用的增删改
    public int update(String sql, Object... params) {
        
}

jdbcUtils:

也是个工具类

class JdbcUtils {
    private static ComboPooledDataSource dataSource;

    private static ThreadLocal<Connection> tl = new ThreadLocal<Connection>();

    


}

数据库:

CREATE TABLE `person` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `name` varchar(255) DEFAULT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;

这里我是用了c3p0-config.xml来连接数据库

c3p0-config.xml

这些代码写完就差不多了

这里我加了些css和效果就是这样: