how to set up fuse.js like vs code

326 views Asked by At

How to set options for fuse.js when I want the same behavior like VSCode (Ctrl+P) file search?

On official example, with {ignoreLocation: true}

https://fusejs.io/demo.html

search pattern = "tprt"

'The Preservationist' should be first as it has all 4 searched characters (indices), instead of 'Incompetence' which only has 2

1

There are 1 answers

1
RAI On

if you want to search by indicies then you need to expose them and create a custom sort function for that.

Here is an example that will search by matched characters (indicies):

const options = {
  ignoreLocation: true,
  keys: ['title'],
  includeMatches: true,
  sortFn: (a, b) => b.matches[0].indices?.length - a.matches[0].indices?.length
};

const list = [
  {
    "title": "Old Man's War",
    "author": {
      "firstName": "John",
      "lastName": "Scalzi"
    }
  },
  {
    "title": "The Lock Artist",
    "author": {
      "firstName": "Steve",
      "lastName": "Hamilton"
    }
  },
  {
    "title": "HTML5",
    "author": {
      "firstName": "Remy",
      "lastName": "Sharp"
    }
  },
  {
    "title": "Right Ho Jeeves",
    "author": {
      "firstName": "P.D",
      "lastName": "Woodhouse"
    }
  },
  {
    "title": "The Code of the Wooster",
    "author": {
      "firstName": "P.D",
      "lastName": "Woodhouse"
    }
  },
  {
    "title": "Thank You Jeeves",
    "author": {
      "firstName": "P.D",
      "lastName": "Woodhouse"
    }
  },
  {
    "title": "The DaVinci Code",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
  {
    "title": "Angels & Demons",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
  {
    "title": "The Silmarillion",
    "author": {
      "firstName": "J.R.R",
      "lastName": "Tolkien"
    }
  },
  {
    "title": "Syrup",
    "author": {
      "firstName": "Max",
      "lastName": "Barry"
    }
  },
  {
    "title": "The Lost Symbol",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
  {
    "title": "The Book of Lies",
    "author": {
      "firstName": "Brad",
      "lastName": "Meltzer"
    }
  },
  {
    "title": "Lamb",
    "author": {
      "firstName": "Christopher",
      "lastName": "Moore"
    }
  },
  {
    "title": "Fool",
    "author": {
      "firstName": "Christopher",
      "lastName": "Moore"
    }
  },
  {
    "title": "Incompetence",
    "author": {
      "firstName": "Rob",
      "lastName": "Grant"
    }
  },
  {
    "title": "Fat",
    "author": {
      "firstName": "Rob",
      "lastName": "Grant"
    }
  },
  {
    "title": "Colony",
    "author": {
      "firstName": "Rob",
      "lastName": "Grant"
    }
  },
  {
    "title": "Backwards, Red Dwarf",
    "author": {
      "firstName": "Rob",
      "lastName": "Grant"
    }
  },
  {
    "title": "The Grand Design",
    "author": {
      "firstName": "Stephen",
      "lastName": "Hawking"
    }
  },
  {
    "title": "The Book of Samson",
    "author": {
      "firstName": "David",
      "lastName": "Maine"
    }
  },
  {
    "title": "The Preservationist",
    "author": {
      "firstName": "David",
      "lastName": "Maine"
    }
  },
  {
    "title": "Fallen",
    "author": {
      "firstName": "David",
      "lastName": "Maine"
    }
  },
  {
    "title": "Monster 1959",
    "author": {
      "firstName": "David",
      "lastName": "Maine"
    }
  }
]

const options = {
  ignoreLocation: true,
  keys: ['title'],
  includeMatches: true,
  sortFn: (a, b) => b.matches[0].indices?.length - a.matches[0].indices?.length
};
const fuse = new Fuse(list, options);
const pattern = "tprt";
document.getElementById('output').innerHTML = JSON.stringify(fuse.search(pattern), null, 3);
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<pre id='output'></pre>