prevAll ().length; 獲取被選中元素上面的兄弟元素的個(gè)數(shù)
動(dòng)態(tài)下拉菜單框思路
使用工具? java? ajax mysql?? 新手手打 第一次 當(dāng)做復(fù)盤? 語言可能組織不合理 理解萬歲
?前臺(tái)
? 定義一個(gè)html頁面設(shè)置一個(gè)input輸入框? 在輸入框下面添加一個(gè)div1顯示下拉列表
? 列表項(xiàng)? 使用div標(biāo)簽實(shí)現(xiàn)? 通過ajax動(dòng)態(tài)請(qǐng)求數(shù)據(jù)庫 使用jq生成 最多顯示5個(gè)根需求而定
? 添加對(duì)應(yīng)的css
? js實(shí)現(xiàn)動(dòng)態(tài)菜單功能
? ? ? ? 給input輸入框添加一個(gè)onkeyup事件
當(dāng)鍵盤彈起時(shí)獲取輸入框中的value值使用trim()方法去除首尾空
如果獲取到的數(shù)據(jù)為空, 使用div對(duì)象.html(" ");對(duì)下拉列表進(jìn)行清空并隱藏,
如果不為空,通過ajax發(fā)送請(qǐng)求到服務(wù)器使用input輸入框中的值進(jìn)行模糊查詢;將返回的結(jié)果轉(zhuǎn)換位json數(shù)組格式,遍歷json數(shù)組進(jìn)行div 列表項(xiàng)的拼接最多拼接5次 給每一個(gè)div指定一個(gè)class方便后期獲取.拼接完成以后將列表項(xiàng)添加到div1中并使其顯示
?按下鍵盤 上 下? 給選中項(xiàng)添加背景顏色? 按下鍵盤上? 對(duì)應(yīng)的code碼是38 下是40
? 準(zhǔn)備一個(gè)class 樣式? bg設(shè)置bgcolor
? 當(dāng)頁面加載完成時(shí) 給網(wǎng)頁 document 綁定一個(gè)onkeydown事件
? 首先定義一個(gè)event對(duì)象監(jiān)聽鍵盤
?? var eve=event||window.event;
? 如果監(jiān)聽到向上事件時(shí)? 使input輸入框失去焦點(diǎn)
? 通過上述的class 獲取所有下拉框
? 使用prevAll方法獲取被設(shè)置過bg樣式的下拉框個(gè)數(shù)
??????????? 如果為0的話 將下拉框中最后一個(gè)設(shè)置樣式 因?yàn)橄吕蜻x中只能有一個(gè) 所以添加樣式之前先移除所有? ? 下拉框的bg樣式? 通過eq(),addclass()實(shí)現(xiàn)
?????????? 如果有設(shè)置過的話 prevAll().length會(huì)返回該元素前面有多少個(gè)兄弟元素
? ? ? ? ?? 假設(shè)被選中元素下標(biāo)為2前面就有兩個(gè)兄弟元素? 下標(biāo)分別是0,1 上一個(gè)元素的下標(biāo)就是 prevAll().length-1? 當(dāng)這個(gè)length減到0時(shí) 會(huì)繼續(xù)向最后一個(gè)下拉框添加樣式
?? 如果監(jiān)聽到向下事件時(shí) 使input輸入框失去焦點(diǎn)
? ? ? 通過上述的class 獲取所有下拉框
? ? ? 通過hasClass("bg")判斷是否被設(shè)置過樣式 如果沒有將第一個(gè)添加樣式
? ? ? 如果被設(shè)置過? var len=prevAll().length獲取該元素前面有多少個(gè)兄弟元素
? ? ? 繼續(xù)判斷是不是最后一個(gè)元素 如果是最后一個(gè)元素的話
? ? ??? (所有列表項(xiàng)個(gè)數(shù)-1==len){
? ? ? ? ? ? //? 假設(shè)共有5個(gè)元素 最后一個(gè)被選中時(shí) 他前面得到兄弟個(gè)數(shù)為4? 5-當(dāng)前元素也等于4
? ? ? ? ? ? ? 給第一個(gè)元素添加樣式
? ? ? ? ? }否則{
? ? ? ? ? 假設(shè)被選中的元素是4 它的下表是3? 那他前面的兄弟個(gè)數(shù)(len)就有3個(gè) 所以下一個(gè)列表項(xiàng)的下標(biāo)就是len+1
? ? ? ? ? 當(dāng)下標(biāo)加到4時(shí)元素個(gè)數(shù)是第5個(gè) 再次點(diǎn)擊就會(huì)執(zhí)行 上面的方法給第一個(gè)列表項(xiàng)添加樣式
}
js代
傳上來就沒縮進(jìn)了
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/5/15
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>百度下拉菜單</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box1{
width:498px;
border:1px solid skyblue;
border-bottom:none;
}
#inputid{
width:500px;
height:30px;
border:1px solid skyblue;
}
#box1 div{
border-bottom:1px solid skyblue;
height:28px;
}
.optcss{
background:skyblue;
}
</style>
<script src="js/jquery-3.4.0.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//頁面加載完畢先將下拉框隱藏
? ? // $(function () {
//? ? $("#box1>div").hide();
// });
? ? //通過ajax獲取信息顯示到下拉框中
? ? //
? ? function test() {
//獲取文本框中的值
? ? ? var inputval=$("#inputid").val().trim();
if (inputval.length==0){
$("#box1").hide().html(" ");
}else{
// $("#box1").html(" ");
? ? ? ? ? //獲取input框中的值
? ? ? ? ? //發(fā)送ajax請(qǐng)求
? ? ? ? ? $.get("Servlet",{"method":"selopt","val":inputval},function (res) {
//將獲取到的信息 拼接到div中發(fā)送到頁面
? ? ? ? ? ? ? var opts="";
var arr=JSON.parse(res);
for (var i=0;i
if (i<5){
opts+="<div class='opt'>"+arr[i]+"</div>";
}
}
//在show直接修改了 div中的代碼 相當(dāng)于變相清空了里面的代碼
? ? ? ? ? ? ? $("#box1").show().html(opts);
});
}
}
//獲取整個(gè)頁面對(duì)象 綁定事件
? ? $(document).keydown(function () {
// 上38 下40
? ? ? ? var eve=event||window.event;
//如果按下上? 將最后一個(gè)下拉選項(xiàng)顏色改變 并使輸入框失去焦點(diǎn)
? ? ? ? if(eve.keyCode==38){
$("#inputid").blur();
//獲取 下拉框中被設(shè)置過bg元素的上面還有多少節(jié)點(diǎn)
? ? ? ? ? ? var opts=$(".opt");
var csslengthup=$(".optcss").prevAll().length;
//判斷是否有被設(shè)置過顏色的元素 如果沒有
? ? ? ? ? ? if (csslengthup==0){
//獲取所有帶opt的元素并將最后一個(gè)元素添加樣式
? ? ? ? ? ? ? ? //移除所有被選中樣式
? ? ? ? ? ? ? opts.removeClass("optcss");
//然后添加
? ? ? ? ? ? ? ? opts.eq(opts.length-1).addClass("optcss");
}else{
//如果有被添加的元素? 將該元素的前一個(gè)添加樣式
? ? ? ? ? ? ? ? opts.removeClass("optcss").eq(csslengthup-1).addClass("optcss");
}
}else if(eve.keyCode==40){
//使輸入框失去焦點(diǎn)
? ? ? ? ? ? $("#inputid").blur();
//獲取所有的列表項(xiàng)
? ? ? ? ? ? var opts=$(".opt");
//判斷 如果沒有被設(shè)置過樣式 將第1個(gè)添加樣式
? ? ? ? ? ? if($(".optcss").hasClass("optcss")){
//獲取設(shè)置了bg樣式元素的哥哥節(jié)點(diǎn)
? ? ? ? ? ? ? ? var csslengthdown=$(".optcss").prevAll().length;
if(csslengthdown==opts.length-1){//如果是最后一個(gè)元素 將第一個(gè)添加樣式
? ? ? ? ? ? ? ? ? ? //將第一個(gè)元素設(shè)置樣式
? ? ? ? ? ? ? ? ? ? opts.removeClass("optcss").eq(0).addClass("optcss");
}else{
opts.removeClass("optcss").eq(csslengthdown+1).addClass("optcss");
}
}else{
opts.removeClass("optcss").eq(0).addClass("optcss");
}
}
});
</script>
<body>
<input type="text" id="inputid" onkeyup="test()">
<div id="box1">
</div>
</body>
</html>
