实现fuse.js.io函数

时间:2017-08-20 02:51:33

标签: javascript html search

所有。我正在尝试实现fuse.js.io搜索功能,好吧,fuse.js.io。我已将 fuse.js 与我的HTML以及带有变量的 search.js 相关联:

    var list = [   {
    title: "The Adventures Of Huckleberry Finn",
    author: {
      firstName: "Mark Twain",
    }
 },]; 

来自Fuse的脚本在我的HTML中如下:

    <script type="text/javascript"
    var options = {
       shouldSort: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
"title",
"author.firstName"
]
};
var fuse = new Fuse(list, options); // "list" is the item array
var result = fuse.search("");


</script>

问题:

如何链接包含以下内容的 search.js

    var list = [   {
    title: "The Adventures Of Huckleberry Finn",
    author: {
      firstName: "Mark Twain",
      }
    },]; 

将我的HTML作为返回键的实际搜索功能。此外,没有控制台错误,我只是不知道如何将脚本变成真正的功能。

1 个答案:

答案 0 :(得分:0)

只需将其导入您的html就好了

<script src='path/to/script'></script>

或者您可以在当前的脚本标签中使用它,如此

<script>
require('path/to/file')
... your code here ...
</script>

更新: 要在html中包含外部脚本,您需要在标记内部执行此操作

<html>
  <head>
    <link rel='stylesheet' ... ... ... // and so on
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js'></script>
    <script src='path/to/your/own/js/file'></script>
  <head>
  <body>
    ... your html goes here. 
    You can also include <script> tags 
    in your html. The Load order is important so remember to 
    load your libraries (fuse.js) in the <head> so you have access 
    to it in the body
  <script>
    // javascript goes here 
    let something = 'this is fine for including js in your html'
    // OR if you want to create a separate file you can include it like so
    require('path/to/file')
  </script>
  </body>
</html>