使用SAE KVDB快速实现 支持中文/拼音/全拼/的AutoComplete

    jQueryUI的AutoComplete是一个好东西,但是无奈不支持中文,有好几次想在产品中添加这个功能但都因为用PHP实现一个中文 还要拼音和全拼的索引太过麻烦而最终放弃.

    在开发这个火车票交易项目的时候,发现SAE的KVDB是个好东西,使用前缀查询可以轻松实现中文的自动完成的支持,正好现在项目因为实名制已经砍掉了有时间,就把这个发现分享给大家 作为我在CSDN的第一篇博客:)))

    SAE的KVDB是一个Key/Value存储引擎,也就是noSQL. 测试了一下性能竟然比SAE的MC都高 大家可以先看一下文档 http://sae.sina.com.cn/?m=devcenter&catId=199

    

   同学们可以先看一下我们的应用 输入be就会自动提示相关的站名


   插件交互的流程是   插件将输入的字符'be'使用GET的方式发送给服务器 服务器返回拼音或全拼由这个两个字符开头的所有车站的站名


    前端的代码大家可以参考jQueryUI的文档 非常详细我就不罗嗦哦了 http://jqueryui.com/demos/autocomplete/


关键代码只有三行:


    $('.stops').autocomplete({
			source: "http://huijiala.sinaapp.com/stop.php",
			minLength: 1,
		});


这个JSON串的返回才是最头疼的,但是使用KVDB的pkrget 前缀范围查找 方法就很轻松了这个方法可以把所有含有相同前缀的KEY的值全部取出来.看到这个方法后本来很头疼的这个问题已经完全是小菜一碟了 我们只要将拼音和全拼作为key将 对应的站点信息作为value存到KVDB里就可以了 


下面是具体的实现 :

<?
header("Content-type: application/json");
echo '[';
$reslut='';
if(@$key=$_GET['term']){
    $kv = new SaeKV();
    $ret = $kv->init();  
    $mc=memcache_init();

    function getraw($pkrkey,$kv){
        $value='';
        $ret = $kv->pkrget($pkrkey, 100); 
        while (true) {
            foreach($ret as $k => $v){
                $value.=$v;
            }; 
            end($ret);
            $start_key = key($ret);
            $i = count($ret);
            if ($i < 100) break;
            $ret = $kv->pkrget($pkrkey, 100, $start_key);
        }
        return $value;
    }

    //输出
    
    if( !@$reslut=$mc->get($key)){//如果mc失败

        $reslut.=getraw('acHZ'.$key,$kv);
        $reslut.=getraw('acJP'.$key,$kv);
        $reslut.=getraw('acQP'.$key,$kv);
        if ($reslut){$mc->set($key,$reslut);};
    }
}
if ($reslut=='') { $reslut='{"label":"没有该站","value":""}'; };
echo $reslut;
echo '{"":""}]';
?>



 
















项目中有一个城市导航,导航上有一个城市搜索,即用户输入城市名、或拼音即可有匹配的提示,方便用户选择。于是乎下载了一个jquery.autocomplete-1.1.3,但引用到项目后,发现几个问题,并相应做了修改: 1.中文输入后,服务端不能正常获取ajax提交的数据(此处,当然可以用相应转码,本人试了n种方便仍改),细看代码发现, 是用 $.get(this.serviceUrl, me.options.params, function(txt) { me.processResponse(txt); }, 'text'); 提交的, 于是改成了我熟悉的提交方式。 $.ajax({url:this.serviceUrl,data:"query="+me.options.params.query,timeout: 5000,success: function(o){me.processResponse(o);}}); 问题立即解决。 猜想,是默认utf-8编码与我服务端过滤器中转码以及代码的转码发生了冲突。 2.当输入框值发生变化时,onchange事件不灵敏。 于是,添加了一个函数,输入值一但onchange就调用 。 onKeyProcessDefult: function(i) { var me, fn, s, d; me = this; s = me.suggestions[i]; d = me.data[i]; if(this.currentValue!=s || undefined==d){d="";s="";} this.selectedIndex=0; //输入时,一但有匹配的项,就默认选择第一项,这样,再按回车键,即可直接submit提交 jht添加 2011-07-20 $(".auto_selected_val").val(d); } 3. 当输入正确值,而不去选择相应提示项时,按回车键,不能完成自动提交。另外就是,当输入正确值,而不去选择相应提示项进,点击后面的提交按钮,也不能完成提交。(赶集网的城市切换也有这个小瑕疵哦)。 于是修改为,一但输入后只有可匹配的项时,就默认选中第一项(代码如上)。 这样,再提交就不是问题了。 4.输入值,当没有相应匹配项时,没有任何提示,不友好,影响用户体验。 5.服务服端注意返回json格式参数格试哦{ query:'c',suggestions:['北京','保定','包头','本溪'],data:['hr','cu','cy','cz'] } 项目应用实例:http://www.juyuan.com/members/city 参考实案例:http://www.ganji.com/index.htm
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值