diff --git a/example/src/App.vue b/example/src/App.vue
index fb2892941c6f085badddf923aa3b8a2ed16dde0d..3d8cfad410cf6a5a519f6d4dfab6cc058a51a32e 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -27,6 +27,7 @@
 <script>
   import formulaObj from './formula'
   import { calculate, formulaWatcher, FormulaEditor } from 'vue-formula-editor'
+  // import { calculate, formulaWatcher, FormulaEditor } from '../../src/index'
 
   export default {
     name: 'HomeView',
diff --git a/package-lock.json b/package-lock.json
index 1658d46eb9df90a954ec53f5d8bfc8485ce3039e..140ace491bbd96ce4c3397e5692bbfd5b59a52be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-formula-editor",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-formula-editor",
-      "version": "0.1.0",
+      "version": "0.2.2",
       "license": "MIT",
       "dependencies": {
         "@formulajs/formulajs": "^4.4.5",
diff --git a/src/components/FieldVariable.vue b/src/components/FieldVariable.vue
index e0820dcd16ad9891915f2935deff97b59c8b8860..dc8bb4951565f719bcaa7dde57b5068452adb0b0 100644
--- a/src/components/FieldVariable.vue
+++ b/src/components/FieldVariable.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="field-variable">
+    <div class="field-search">
+      <el-input
+        placeholder="搜索变量"
+        prefix-icon="el-icon-search"
+        v-model="searchVariable"
+        clearable
+         />
+    </div>
     <div
       class="field-item"
       @click="$emit('fieldSelect', item)"
-      v-for="item in fieldList"
+      v-for="item in filterFieldList"
       :key="item.enCode">
       <span>{{ item.fullName }}</span>
       <span :field-type="item.value" class="text-tag">
@@ -14,6 +22,7 @@
 </template>
 
 <script>
+
   export default {
     name: 'FieldVariable',
     props: {
@@ -31,13 +40,23 @@
       }
       return {
         type,
+        // 搜索值
+        searchVariable:'',
+        // 过滤后的变量
+        filterFieldList: [],
       }
     },
     computed: {},
-    watch: {},
+    watch: {
+      searchVariable(val,old) {
+        this.filterFieldList = this.fieldList.filter(({fullName}) => fullName.includes(val))
+      },
+    },
     methods: {},
     async created() {},
-    mounted() {},
+    mounted() {
+      this.filterFieldList = this.fieldList
+    },
   }
 </script>
 <style lang="less" scoped>
diff --git a/src/components/FormulaList.vue b/src/components/FormulaList.vue
index cc1152a05ae8a63ed489a9c641c01fc34e7e3eae..c45be8faa68638afe48c702c0a70a428a4f53946 100644
--- a/src/components/FormulaList.vue
+++ b/src/components/FormulaList.vue
@@ -1,18 +1,31 @@
 <template>
   <div class="formula-list">
-    <Tree
-      :data="nodes"
+    <el-input
+    placeholder='搜索函数'
+    prefix-icon="el-icon-search"
+    v-model="searchTreeVariable" 
+    clearable
+    ></el-input>
+    <div class="treeContainer" @mouseleave="leaveTree" >
+      <Tree
+      :data="filterData"
       :default-expanded-keys="['frequentlyUse']"
       :props="props"
+      :current-node-key="currentKeyNode.enCode"
       node-key="enCode"
-      @node-click="nodeClick">
-      <span class="info-container" slot-scope="{ data }">
+      @node-click="nodeClick"
+      highlight-current
+            
+      >
+      <span class="info-container" @mouseenter="enterInfo(data)"  slot-scope="{ data }">
         <span>{{ data.name }}</span>
         <span v-if="data.tip" class="tip">
           {{ data.tip }}
         </span>
       </span>
     </Tree>
+    </div>
+
   </div>
 </template>
 
@@ -37,14 +50,55 @@
       },
     },
     data() {
-      return {}
+      return {
+        searchTreeVariable:"",
+        // 选中的节点
+        currentKeyNode:{},
+      }
+    },
+    computed: {
+      filterData() {
+        if(!this.searchTreeVariable){
+          return this.nodes
+        }
+        return this.filterTreeData(this.nodes)
+      },
     },
     watch: {},
     methods: {
       nodeClick(o) {
-        if (o.formula) return
+        const currentKeyNode = this.currentKeyNode
+        // 目录情况
+        if (o.formula){
+          if(currentKeyNode && currentKeyNode.enCode ){
+            this.currentKeyNode={}
+          }
+          return
+        }
+        this.currentKeyNode = o
         this.$emit('formulaClick', o)
       },
+      filterTreeData(nodes) {
+        // 找到nodes树中包含searchTreeVariable的节点但只有一层的结果
+        return nodes.reduce((pre,cur)=>{
+          if(cur.name.toLowerCase().includes(this.searchTreeVariable)){
+            pre.push({...cur})
+          }
+          if(cur.formula){
+            pre.push(...this.filterTreeData(cur.formula))
+          }
+          return pre
+        },[])
+      },
+      enterInfo(data) {
+        if(data.formula) return 
+        this.$emit('enterInfo', data)
+      },
+      leaveTree(){
+        if(this.currentKeyNode && this.currentKeyNode.enCode){
+          this.$emit('enterInfo', this.currentKeyNode)
+        }
+      }
     },
     created() {},
     mounted() {},
@@ -57,12 +111,13 @@
     height: 100%;
     border-right: 1px solid #d7d9dc;
     .info-container {
+      width: 100%;
       display: flex;
       flex-direction: column;
     }
     ::v-deep .el-tree-node__content {
       height: 100%;
-      margin-top: 6px;
+      // margin-top: 6px;
       padding: 6px 0;
       user-select: none;
     }
diff --git a/src/index.vue b/src/index.vue
index 6f25ba894611532d266aca22b480d6515bd3fd80..4b0a05d83726e65e88b275c86925ec1105337fb0 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -13,7 +13,9 @@
       <FormulaList
         :nodes="nodes"
         class="formula-list"
-        @formulaClick="onFormulaClick" />
+        @formulaClick="onFormulaClick"
+        @enterInfo="onEnterInfo"
+        />
       <div v-if="currentFormula" class="formula-info">
         <div class="info-text">{{ currentFormula.tip }}</div>
         <div class="info-text">用法：{{ currentFormula.usage }}</div>
@@ -131,6 +133,9 @@
           'field'
         )
       },
+      onEnterInfo(fumulaInfo){
+        this.currentFormula = fumulaInfo
+      }
     },
     created() {},
     mounted() {},