仿百度,谷歌輸入框自動(dòng)提示功能---json版

1、上個(gè)文章已經(jīng)實(shí)現(xiàn)自動(dòng)提示的功能，但是看過(guò)的童鞋們都知道我的交互使用XML做的，XML的傳輸是十分耗帶寬的，用于我們這些做著玩的還可以，但是一旦數(shù)據(jù)量大起來(lái)他就相當(dāng)?shù)牟唤o力了，所以我想使用JSON格式的數(shù)據(jù)傳輸，這樣應(yīng)該會(huì)好很多，說(shuō)實(shí)話，之前知道有JSON，但是沒(méi)學(xué)過(guò)啊，所以只好先學(xué)學(xué)JSON，至于JSON如何用我就不介紹了，大家網(wǎng)上搜搜到處都是，如果有什么搜不到的可以給我留言，雖然我不精通，但是基本使用還是能夠應(yīng)付的。好了，言歸正傳，說(shuō)

2、說(shuō)我們這次的主題，這次修復(fù)的BUG是什么呢？有童鞋發(fā)現(xiàn)了嗎？，好吧，沒(méi)發(fā)現(xiàn)也沒(méi)關(guān)系，因?yàn)槲易约阂彩沁@次才發(fā)現(xiàn)。那就是setTimeout()的問(wèn)題，大家在服務(wù)器端加個(gè)打印輸出一下，我們會(huì)發(fā)現(xiàn)時(shí)延并沒(méi)有起到效果。好了，這次我就不上源碼了，也不上圖了，直接上修復(fù)過(guò)的代碼，和使用JSON的部分。注意哦，要加上json.js，和一個(gè)JSON包，這個(gè)我打包給大家上傳。JS:Java代碼1.高亮索引2.varhighlightindex=13.va

3、rtimeDelay4.設(shè)置文本框的內(nèi)容5.functionsetContent(conindex)6.varcontext=con.eq(index).text()7.$(“#content“).val(context)8.9.10.設(shè)置背景顏色11.functionsetBkCol(conindexcol)12.con.eq(index).css(“backgroundcol“col)13.14.15.$(document).rea

4、dy(16.function()17.獲得輸入框節(jié)點(diǎn)18.varinputItem=$(“#content“)19.varinputOffset=inputItem.offset()20.varautonode=$(“#auto“)21.設(shè)置提示框隱藏57.58.highlightindex=$(this).attr(“id“)59.$(this).css(“backgroundcol““#ADD8E6“)60.setContent(c

5、onhighlightindex)61.62.)63.鼠標(biāo)離開(kāi)64.newNode.mouseout(65.function()66.$(this).css(“backgroundcol““white“)67.68.)69.鼠標(biāo)點(diǎn)擊70.newNode.click(71.function()72.setContent(conhighlightindex)73.highlightindex=174.autonode.hide()75.76

6、.)77.78.)each79.80.當(dāng)返回的數(shù)據(jù)長(zhǎng)度大于0才顯示81.if(wdNodes.length0)82.autonode.show()83.else84.autonode.hide()85.86.87.“json“)post88.89.取消上次提交90.clearTimeout(timeDelay)91.延遲提交，這邊設(shè)置的為200ms92.timeDelay=setTimeout(93.mydeal200)settimeo