JavaWeb基础--（模糊搜索自动填充）

最新推荐文章于 2024-02-19 17:11:02 发布

ekayun

最新推荐文章于 2024-02-19 17:11:02 发布

阅读量2.9k

点赞数 2

文章标签： JavaWeb 模糊搜索自动填充

本文链接：https://blog.csdn.net/u013251413/article/details/82454352

版权

Java web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

web脚本代码：

  <body>
		<div class="container" style="margin-top: 50px;">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">请填写如下信息：</h3>
				</div>
				<div class="panel-body">
					<form class="form-horizontal" action="#">
						<div class="form-group" style="position: relative;">
							<div class="col-sm-6">
								<div class="input-group">
								  <span class="input-group-addon">输入查询内容：</span>
								  <input type="text" class="form-control" id = "inWord" onkeyup = "findWord(this)">
								</div>
							</div>
							<div class="col-sm-3">
								<button type="button" id="butData" class="btn btn-primary">提交</button>
							</div>
						</div>
						<div class="panel panel-default" id = "showWord" style="position: absolute;display:none; ">
							  <ul class="list-group"></ul>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	function findWord(obj){
		var content = "";
		var word = $(obj).val();
		if(word.trim()== '')return;
			$.ajax({ 
				type: "POST",
				url: '/CopyKey/showWrod',
				async:true,
				data:{word:word},
				success: function(data){
					if(data.length > 0){
						for(var i = 0;i<data.length;i++){
							 content+="<li class='list-group-item' onclick = 'clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'style='cursor:pointer'>"+data[i]+"</li>";
							}
						$("#showWord ul").html(content);
						$("#showWord").css("display","block");
						}
				  },
				dataType: "json"
			});
		};
	function clickFn(obj){
		var clickWord = $(obj).html();
		$("#inWord").val(clickWord);
		$("#showWord").css("display","none");
		}
	function outFn(obj){
		$(obj).css("background","#fff");
		}
	function overFn(obj){
		$(obj).css("background","#f2dede");
	}
	</script>

Service层代码：

public List<String> findWord(String word) throws SQLException {
		String[] strs = word.split("'");
		StringBuffer sb = new StringBuffer();
		for (String str : strs) {
			sb.append(str);
		}
		FindWordDao findWord = new FindWordDao();
		List<String> wordList = findWord.findByWord(new String (sb));
		return wordList;
	}

dao层代码：

public List<String> findByWord(String wrod) throws SQLException {
		List<String> wordList = new ArrayList<String>();
		Connection conn = JdbcUtils.getConnection();
		Statement st = null;
		ResultSet rs = null;
		if(conn != null){
			String sql = "select * from UT_E_Stock where name like '%"+wrod+"%' ";
			System.out.println(sql);
			st = conn.createStatement();
			rs = st.executeQuery(sql);
			while(rs.next()){
				String name = rs.getString("Name");
				wordList.add(name);
			}
		}
		return wordList;
	}

运行实例：

ekayun

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
9
评论
JavaWeb基础--（模糊搜索自动填充）

web脚本代码： &lt;body&gt; &lt;div class="container" style="margin-top: 50px;"&gt; &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt; &lt;h3 cla
复制链接

扫一扫

专栏目录