转自:https://blog.csdn.net/u013251413/article/details/82454352
web脚本代码:
<style>
.list-group li:hover{background-color:#888;color:#fff;}
</style>
<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)' 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");
}
</script>
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;
}
运行实例: