Mootools-字符匹配与搜索

在用海内的时候,输入好友名字的时候会由一个自动提示的功能,在加入班级时,按照省份列出学校也会有一个搜索框,输入一个汉字就可以将含有这个汉字的大学名字列出来.并且将该关键词高亮.

如:输入”美”字,将会列出”中央美术学院”，”北京美国英语语言学院”等搜索结果.

搜索结果奇快,完全不需要查询数据库.只是事先必须将所有数据以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);
            }
        },
    });
 })