虫子也有理想 – Bugsidea:Blog

在用海内的时候,输入好友名字的时候会由一个自动提示的功能,在加入班级时,按照省份列出学校也会有一个搜索框,输入一个汉字就可以将含有这个汉字的大学名字列出来.并且将该关键词高亮.
如:输入”美”字,将会列出”中央美术学院”，”北京美国英语语言学院”等搜索结果.

搜索结果奇快,完全不需要查询数据库.只是事先必须将所有数据以JSON格式存在页面上.

按照这个思路,我用Mootools实现了一个这样的实例.
主要用到了Javascript的indexOf()和Mootools的Event和JSON相关的函数.

核心代码如下:(点这里看实例)

window.addEvent(‘domready’, function() {<br /> var geodb = ‘[JSON String Here....';<br /> var geo = Json.evaluate(geodb);<br /> var filter = $('filter');<br /> filter.addEvents({<br /> 'keyup': function() {<br /> var filteText = (filter.value).clean();<br /> var filteLenth = filteText.length;<br /> if(filteText == '')<br /> {<br /> filter.value = '';<br /> $('cmp-container').setHTML('');<br /> }else{<br /> var searchRt = new Array();<br /> for(var i=0;i<geo.length;i++)<br /> {<br /> province = geo[i].name;<br /> var ext = province.indexOf(filteText)<br /> if(ext >= 0)<br /> {<br /> province = geo[i].name.replace<br /> (filteText,’<b>’+filteText+’</b>’);<br /> searchRt += ‘<li>’+province+’</li>’;<br /> }<br /> searchRt += ”;<br /> }<br /> $(‘cmp-container’).setHTML(searchRt);<br /> }<br /> },<br /> });<br /> })<br />