VisualSearch.js 技术文档

1. 安装指南

在开始使用 VisualSearch.js 前，您需要确保已经具备基本的开发环境。以下是安装 VisualSearch.js 的步骤：

• 首先，您可以从我们的官方GitHub仓库下载最新版本的 VisualSearch.js。
• 下载后，解压文件包，将 visualsearch.js 文件拷贝到您的项目目录中。
• 在您的 HTML 文件中，通过 <script> 标签引入 visualsearch.js 文件。

<script src="path/to/visualsearch.js"></script>

确保您的JavaScript文件路径正确。

2. 项目的使用说明

VisualSearch.js 能够增强普通搜索框的功能，使其支持自动完成面向属性的搜索查询。以下是使用 VisualSearch.js 的基本步骤：

• 首先，定义您的搜索框，为其添加一个ID以便于后续操作。

<input type="text" id="search-box" />

• 然后，初始化 VisualSearch.js 实例，并指定搜索框的ID以及您想要自动完成的属性和值。

var vs = new VisualSearch({
  searchEl: '#search-box',
  facets: [
    { name: 'author', completions: ['Alice', 'Bob', 'Charlie'] },
    { name: 'tags', completions: ['JavaScript', 'CSS', 'HTML'] }
  ]
});

• 最后，您可以通过调用 vs.getQuery() 方法来获取结构化的搜索查询对象，而无需自己解析查询字符串。

3. 项目API使用文档

以下是 VisualSearch.js 提供的主要API方法：

• new VisualSearch(options): 构造函数用于创建一个 VisualSearch 实例。options 参数包括：

  • searchEl: 一个字符串或DOM元素，指定搜索框的选择器或元素。
  • facets: 一个对象数组，定义了搜索查询的属性（名称）以及可能的自动完成值。

• vs.getQuery(): 返回当前搜索框中的查询作为一个结构化的对象。

4. 项目安装方式

除了从GitHub下载最新版本之外，VisualSearch.js 也可以通过npm进行安装：

npm install visualsearch

通过npm安装后，您可以使用 require 或 import 语句在您的JavaScript模块中引入 VisualSearch.js。

const VisualSearch = require('visualsearch');
// 或者
import VisualSearch from 'visualsearch';

请确保您的项目支持ES6模块或CommonJS模块系统。