JS仿百度自动下拉框模糊匹配提示

实际项目中，我们可以把数据获取改成创建交互式、快速动态网页应用的网页开发技术动态获取，在getContent()中

！DOCTYPEhtmlheadtitlejs/jQuery实现类似百度搜索功能/titlemeta名称='作者'内容='迈克尔'元名称='关键词'内容='js/jQuery实现类似百度搜索功能元名称='描述'内容='js/jQuery实现类似百度搜索功能，可用键盘控制meta http-equiv=' content-type ' content=' text/html；charset=UTF-8 '/脚本类型=' text/JavaScript ' src=' http :http://apps。bdimg。com/libs/jquery/2。1 .4/jquery。量滴js '/script style type=' text/CSS ' # container { position : absolute；左侧： 50%;前：名40%；} #内容{左侧浮动：相对位置：右： 50%;}输入{边框： 0；宽度： 288像素；height : 30px font-size : 16px；padding: 0 5px线高： 30px}.项目{ padding: 3px 5pxcursor:指针；}.addbg { background: # 87A900}。第一个{border:固体# 87A900 2px宽度： 300像素；} #追加{ border:实心# 87a 900 2px border-top : 0；显示器：无；}/style/head dydiv id=' container ' div id=' content ' div class=' first '输入id=' kw ' onKeyup=' getContent(this)；//div div id=' append '/div/div脚本类型=' text/JavaScript ' var data=['你好，我是迈克尔。你是谁','你最好啦','你最珍贵','你是我最好的朋友','你画我猜','你是笨蛋','你懂得','你为我着迷','你是我的眼'];$(文档)。就绪(函数(){$(文档))。向下键(函数(e){ e=e | | window。事件；var keycode=e。哪个？什么： e . KeyCodeif(键码==38){ if(jquery。修剪)($(' # append ').html())==' '){ return；} movePrev()；} else if(键码==40){ if(jquery。修剪)($(' # append ').html())==' '){ return；}$('#kw ').blur()；if ($(').项目')。有类(' addbg '){ moveNext()；} else {$(' .项目')。removeClass('addbg ').等式(0).addCLaSS(' addbg ')；} } else if(键码==13){ Dojo b()；}});var movePrev=function() {$('#kw ').blur()；定义变量索引=$('。addbg ').普雷瓦尔()。长度；if (index==0) {$(').项目')。removeClass('addbg ').eq($(').项目')。长度- 1)。addCLaSS(' addbg ')；} else {$(' .项目')。removeClass('addbg ').eq(指数- 1)。addCLaSS(' addbg ')；} } var moveNext=function(){ var index=$(' .addbg ').普雷瓦尔()。长度；if (index==$(').项目')。长度- 1) {$(' .项目')。removeClass('addbg ').等式(0).addCLaSS(' addbg ')；} else {$(' .项目')。removeClass('addbg ').eq(指数1)。addCLaSS(' addbg ')；}}var dojob=function() {$('#kw ').blur()；定义变量值=$('。addbg ').text()；$('#kw ').val(值);$(“# append”).隐藏()。html(" ")；}});函数GetContent(obj){ var kw=jquery。修剪.val())；if (kw=='') {$('#append ').隐藏()。html(" ")；返回false } var html=for(var I=0；一。数据。长度；I){如果(数据[i].indexOf(kw)=0){ html=html ' div class=' item ' onmouseent=' getFocus(this)' onClick=' getCon(this)；'data[i] '/div'}}if (html！='') {$('#append ').显示()。html(html)；} else {$('#append ').隐藏()。html(" ")；} }函数getFocus(obj) {$(' .项目')。移除CLaSS(' addbg ')；美元.addCLaSS(' addbg ')；}函数getCon(obj) {var value=$(obj).text()；$('#kw ').val(值);$(“# append”).隐藏()。html(" ")；}/脚本/正文/html以上所述是小编给大家介绍的射流研究…仿百度自动下拉框模糊匹配提示，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！