用extjs的comboBox实现google的搜索联想功能

网上找了好久,又看官方DEMO,结果总是不尽人意,无意中改了代码,哈哈,居然实现了。
下面贴出来代码,以备以后使用
this.psrStore = new Ext.data.JsonStore({
url:URL地址,
    root:'psr',
    totalProperty: 'totalCount',
    fields: [
             {name: 'id',mapping:'id'},
             {name: 'name',mapping:'name'}
        ]
    });
    this.searchPsrCombo = new Ext.form.ComboBox({
    store: this.psrStore,
    displayField:'name',
    hiddenName :'defaultValue',
    valueField:'id',
    typeAhead: false,
    hideTrigger:true,
    emptyText:'搜索资源树...',
    width:190,
    model:'remote',
    minChars:2,  //输入几个字符开始搜索
    selectOnFocus:true
});
    this.searchPsrCombo.on('select',function(combo,record,index){
    //这里写上选中下拉框选项后的代码,record.id 就是选中的值
     });
如上所写,如果你文本框输入了什么,自动会发请求到后台,而且请求中参数query就是你输入要搜索的关键字,
  如果想加上别的搜索条件,就调用psrStore 的beforeLoad事件吧

我写的例子是用户选中一个后,还要搜索一下树,并选中树的结点,结果搜索树网上的例子太少,我用的树数据又太大,没办法,后来领导指点,说出来解决方法,

选中后,得到树的结点,然后倒着就可以推出树的path.比如:
/0/type_root_212/212_1/212_6/212_7/type_7_207/207_10
然后调用树的
//收缩所有节点
sourceTree.collapseAll();
//打开指定的path
sourceTree.expandPath(jsonRes);
哈哈,这样树会自动打开,即使你的树是动态加载的也不怕,当然,前提是树的path要正确
树结点打开后,会触发expandnode事件。然后就可以匹配查找喽。
    //打开子节点时判断,如果是搜索框有值,
    this.sourceTree.on('expandnode',function(node){
    if(sourceLocationID!=undefined&&sourceLocationID!=''){
    if(node.id==sourceLocationID){
    node.select();
    sourceLocationID='';
    }else{
    var childs=node.childNodes;
    var i;
    for(i=0;i<childs.length;i++){
    var chNode=childs[i];
    if(chNode.id==proxyRelation.sourceLocationID){
    chNode.select();
    sourceLocationID='';
    break;
    }
    }
    }
    }
    });
其中sourceLocationID为你记录搜索后用户选中ID.打开时判断节点相等,如果当前节点不等,就遍历其子节点,看看有没有相等的。找到后就用node.select()选中

你可能感兴趣的:(Google,ext)