Liuyang | BlogLife

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

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

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

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


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