本文实例讲解了爪哇岛描述语言输入框自动下拉补全操作，仿百度、谷歌搜索框提示，具体内容如下

效果图：

具体代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML HEAD TITLE新文档/TITLE META NAME=' Generator ' CONTENT=' EditPlus ' META NAME=' Author ' CONTENT=' META NAME=' Keywords ' CONTENT=' META NAME=' Description ' CONTENT='脚本类型=' text/JAVAScript ' src=' http : jquery。js /脚本脚本类型='text/javascript' /*自动下拉补全zhk */var高光指数=-1；//当前高亮的节点$(文档)。ready(function(){ var WordInput=$(' # word ')；var worinputoffset=worinput。offset()；$('#auto ').隐藏()。css(“”边框，' 1px黑色实心')。css('位置'，'绝对').css('top '，worinputoffset。顶级工作输入。高度()' 5 '像素' .css('left '，wordInputOffset.left ' px ').宽度(单词输入。宽度)(2)；单词输入。向上键(函数(事件){ var myEvent=event | | window。事件；var键码=myevent。密钥代码；if(键码=65 keyCode=90 | |键码==8 | |键码==46){ var wordText=$(' # word ').val()；var AutoNode=$(' # auto ')；if(wordText！=' '){ var WordNodes=$(' span ')；自动编码。html(" ")；wordNodes .每个(函数(I){ var wordNode=$(this)；var newDivNode=$('div ').attr('id '，I)；newDivNode.html(wordNode.text()).附录（自动编码);newDivNode.mouseover(函数(){//鼠标进入if(highlightindex！=-1){ $('#auto ').儿童(' div ').eq(highlightindex).css(“”背景色','白色');} highlightindex=$(this).attr(' id ')；$(这个)。css(“”背景色','红色');}) newDivNode.mouseout(函数(){//鼠标移除$(这个)。css(“”背景色','白色');})新divnode。单击(function(){//点击var comText=$(this).text()；$('#auto ').hide()；高亮索引=-1；$('#word ').val(ComText)；})})if(WordNodes。长度0){自动编码。show()；} else { AutoNode。hide()；高亮索引=-1；} } else { AutoNode。hide()；高亮索引=-1；} } else if(键码==38 | |键码==40){ if(键码==38){//向上var autoNodes=$('#auto ').儿童(“div”)；if(highlightindex！=-1){自动编码。突出显示指数.css(“”背景色','白色');高亮索引-；} else { highlight index=autonodes。长度-1；} if(高亮索引==-1){高亮索引=自动编码。长度-1；} autoNodes.eq(highlightindex).css(“”背景色','红色');} if(键码==40){ var autoNodes=$(' # auto ').儿童(“div”)；if(highlightindex！=-1){自动编码。突出显示指数.css(“”背景色','白色');} highlight indexif(highlight index==autonodes。长度){突出显示索引=0；} autoNodes.eq(highlightindex).css(“”背景色','红色');} } else if(键码==13){ if(突出显示索引！=-1){ var comText=$('#auto ').隐藏()。儿童(' div ').eq(highlightindex).text()；高亮索引=-1；$('#word ').val(ComText)；}else{ alert('文本框中的【' $('#word ').val()'】被提交了');$('#auto ').hide()；$('#word ').获取(0)。blur()；//失去焦点} } });$('input [type='button']').单击（函数(){ alert('文本框中的【' $('#word ').val()'】被提交了');});})/脚本/头体输入类型='text' id='word '输入类型='按钮'值='提交div id=' auto '/div PS panaaa/spanspanabc/spanspanabd/spanspanbbc/spanspanbeb/spanspancer/spanspanerd/spanspanbeg/spanspanp/BODY/HTML以上就是本文的全部内容，希望对大家学习爪哇岛描述语言程序设计有所帮助。