`
wuhaowei12345
  • 浏览: 45163 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

用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()选中
分享到:
评论

相关推荐

    Ext combobox 下拉多选框带搜索功能

    2. **实时搜索**:实现搜索功能需要监听ComboBox的`keyup`事件,并在此事件处理器中应用过滤逻辑。过滤函数通常会比较用户输入的文本与列表项的显示文本,只显示匹配的项。 3. **数据源**:ComboBox的数据源可以是...

    extjs3.x combobox智能联想

    在提供的`combobox智能联想.txt`文件中,可能会包含实现上述功能的具体代码示例,包括EXTJS的配置、事件处理和可能的自定义扩展。通过阅读和理解这些代码,你可以更好地掌握EXTJS 3.x Combobox的智能联想功能,并...

    extjs 自动补全 模拟combobox

    总之,EXTJS的Combobox组件结合适当的配置和事件监听,可以轻松实现自动补全功能,无论是本地数据还是远程数据源,都能提供高效且友好的用户体验。在实际开发中,你可以根据项目需求灵活运用这些特性,提高应用的...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式,尤其在数据表单中用于联动选择。在本文中,我们将深入探讨EXTJS如何实现ComboBox的级联效果,并理解其数据提交VALUE的工作原理。 首先,我们需要创建两...

    ExtJS Combobox二级联动列子

    ExtJS的Combobox组件是一种常见的数据输入控件,它提供了下拉列表的功能,用户可以选择列表中的一个选项或者在输入框中自由输入。在实际应用中,我们常常会遇到需要实现二级甚至多级联动的场景,这通常是由于数据的...

    #ComboBox自动补全小技巧(模糊查找)

    在ComboBox中实现此功能,我们需要监听用户输入事件,然后根据当前输入的文本动态过滤列表项。 二、C#实现步骤 1. 首先,确保你的项目引用了System.Windows.Forms命名空间,这是包含ComboBox控件的基础库。 ```...

    extjs editgrid combobox 回显

    在探讨“extjs editgrid combobox 回显”这一主题时,我们主要关注的是如何在ExtJS框架下,实现编辑网格(EditGrid)中的组合框(ComboBox)的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...

    extjs的ComboBox 2级联动

    本文将深入探讨如何在ExtJS中实现ComboBox的二级联动。 首先,我们需要理解ExtJS中的ComboBox基本结构。ComboBox由几个关键部分组成,包括store(数据存储)、displayField(显示字段)和valueField(值字段)。...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...

    模仿extjs风格写的jquery combobox

    5. `js` - 这个目录可能包含了jQuery库本身和其他JavaScript脚本,比如实现Combobox功能的核心代码。 这个jQuery ComboBox组件可能会涵盖以下关键知识点: - jQuery基础:包括选择器、事件处理、DOM操作等。 - ...

    combobox实现下拉框多选

    本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...

    基于extjs框架实现的双日历功能

    基于extjs框架实现的双日历功能

    extjs4 实现下拉树并支持复选

    在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...

    extjs 树 搜索

    总的来说,EXTJS的树形搜索功能是通过结合TreePanel、TreeStore和过滤机制实现的,它提供了灵活的搜索选项,能够满足不同场景下的数据查找需求。通过深入理解和运用这些知识点,我们可以构建出功能强大、用户体验...

    Extjs搜索过滤 类似百度、google搜索

    在标题提到的"Extjs搜索过滤 类似百度、google搜索"中,我们关注的是如何利用ExtJS实现一个高效的、类似百度或Google的搜索功能。这个功能通常涉及到实时数据过滤、模糊匹配、分页以及用户友好的交互设计。 首先,...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    首先,我们来看看`LovCombo.js`,这可能是一个自定义的组合框组件,扩展了ExtJS的原生ComboBox类,以实现多选功能。在ExtJS中,创建这样的组件通常涉及到以下步骤: 1. **创建一个新的类**:定义一个继承自Ext.form...

    extJs4 ComboBox组合框实例

    extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释

Global site tag (gtag.js) - Google Analytics