html自动补全功能

一.是么是自动补全
所谓自动补全就是根据用户输入的信息给出与数据库相匹配的关键字,类似于百度、淘宝等软件搜索框中的提示功能。
二.功能基本框架
html自动补全功能_第1张图片

三:数据库设计

html自动补全功能_第2张图片

四.对应代码实现
首先导入对应的架包

html自动补全功能_第3张图片
( 1 ).前台代码(jsp页面)
编写ajax与后台进行数据交互

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
//注意引入jquery包.编写jquery代码
<script type="text/javascript"src="js/jquery-1.12.4.js"></script>
</head>
<body>
<h2>自动补全功能演示,请输入关键字</h2>
	<input type="text" name="sname" id="select" />
	<input type="button" value="查询">
	<div id="context" style="background-color: red; width: 173px; height: 150px; border: 1; display: none;">
	</div>
	<script type="text/javascript">
		$(function() {
   
			$("#select").keyup(function() {
   
				var z= $('input[name=sname]').val();
				if(z==""){
   
					$('#context')

你可能感兴趣的:(java,java)