Support for case insensitive search

[joaossantos]

---

I would like to have an option so that the images above return the same search results. Thanks in advance

[halower]

This is because the query node uses theIndexOfmethod, it is a fuzzy filtering method, your requirements are accurate query, In fact, your function is already supported, you can customize the searchNodes method. e.g:

search (keyworld) {
  this.$refs.tree.searchNodes(node =>new RegExp(`^${keyworld}$`).test(node.title))
}

[joaossantos]

Thanks for the quick answer.

I tried this but it's still not working properly

Any idea?

[odanzhou]

@joaossantos

search () {
      this.$refs.tree1.searchNodes(node =>new RegExp(this.searchword, 'i').test(node.title))
    }

in demo "vue-tree-halower": "^1.7.1"

[srikanth2042]

@halower how do I enable case insensitive search option on the search box that comes pre-loaded with the plugin v-select-tree?

[halower]

you can use the searchNodes method

[srikanth2042]

@halower can you elaborate bit more, How do I bind the searchNodes method to inbuilt search box in the plugin? I wish there could be boolean flag searchcaseinsensitive that turns on the case insensitive search (the way most search operations works) from v-select-tree plugin itself.

[halower]

I'll reply to the example later, it's going to be a little busy

[halower]

export default {
data () {
  return {
     ...
      searchword: ''
  }
},
  ...
   search (searchcaseinsensitive) {
      this.$refs.tree1.searchNodes(node =>new RegExp(this.searchword, searchcaseinsensitive ?'i' : null).test(node.title))
    }
}

[srikanth2042]

To put it more straightforward, I have got the following code written in vue-cli with typescript:

<template>
  <div>
    <v-select-tree ref='tree' :data="treeData" :multiple="true" :v-model="['node-1-2']"/>
  </div>
</template>

<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
  protected searchword = '';
  protected treeData: any = [{
    title: 'node1',
    expanded: true,
    children: [{
      title: 'node 1-1',
      expanded: true,
      children: [{
        title: 'node 1-1-1'
      }, {
        title: 'node 1-1-2'
      }, {
        title: 'node 1-1-3'
      }]
    }, {
      title: 'node 1-2',
      children: [{
        title: "<span style='color: red'>node 1-2-1</span>"
      }, {
        title: "<span style='color: red'>node 1-2-2</span>"
      }]
    }]
  }];

  public search () {
    console.log(this.searchword);
    this.$refs.tree.searchNodes((node : any) =>new RegExp(this.searchword, 'i').test(node.title));
  }
}
</script>

And it is rendering me following tree: @halower Now I am not sure how to bind search() function with <v-select-tree ref='tree' :data="treeData" :multiple="true" :v-model="['node-1-2']"/>. The call is not even going inside search() function when I search for anything thing in the UI.