<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css">
<!-- <script src="./js/bootstrap.js" type="text/javascript"></script> -->
<script src="./js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-dark bg-primary navbar-expand-lg fixed-top">
<div class="navbar">
<a class="navbar-brand" href="#">Kongjs</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="narbar">
<form class="form-inline">
<input class="form-control mr-sm-2 md-sm-4" type="search" placeholder="Search" aria-label="Search"
id="search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit" id="submit">Search</button>
</form>
<ul class="nav flex-column" id="show">
</ul>
</div>
<div />
<!-- <select id="show" class="show">
<option value="1"></option>
</select> -->
<!-- <span class="show" id="show"></span> -->
<!-- <div class="content">
<input type="text" id="search" name="keyword">
<input type="button" value="搜索一下">
<div class="show" id="show"></div>
</div> -->
<script>
'use strict';
$(() => {
$('#search').keyup(() => {
$('#show').html('').hide();
$('#show').css("position", "absolute");
let keyword = $('#search').val();
console.log(keyword);
if (!keyword.trim()) return;
let url = 'http://localhost:8080/search';
let params = 'keyword=' + keyword;
$.post(url, params,
(data, textStatus, jqXHR) => {
console.log(data);
let str = '';
$.each($(data), (indexInArray, valueOfElement) => {
// str +=
// "<div οnmοuseοver='fun1(this)' οnmοuseοut='fun2(this)' οnclick='fun3(this)'>" +
// valueOfElement + "</div>";
str +=
"<li class='nav-item stop' οnmοuseοver='fun1(this)' οnmοuseοut='fun2(this)' οnclick='fun3(this)'>" +
"<a class='nav-link' href=''>" + valueOfElement +
"</a> </li>";
// str += "<option value="+indexInArray+">"+valueOfElement+"</option>"
});
console.log(str);
$('#show').html(str).show();
}, "json");
$('.stop').mouseout(() => {
$('#show').css("display", "none");
});
});
$('#submit').on('click', () => {
let keyword = $('#search').val().trim();
$.post("http://localhost:8080/search", {
"keyword": keyword
},
(data, textStatus, jqXHR) => {}, "json");
});
});
let fun1 = (param) => {
$(param).css('background-color', 'gray');
}
let fun2 = (param) => {
$(param).css('background-color', 'white');
}
let fun3 = (param) => {
let text = $(param).text();
$('#search').val(text);
$('#show').hide();
}
</script>
</body>
</html>
Jquery + Bootstrap 实现搜索框
最新推荐文章于 2024-01-14 13:23:51 发布