https://github.com/codelibs/docker-formassist
Form Assist Scripts on Fess
https://github.com/codelibs/docker-formassist
autocompletion fess suggestor
Last synced: 3 months ago
JSON representation
Form Assist Scripts on Fess
- Host: GitHub
- URL: https://github.com/codelibs/docker-formassist
- Owner: codelibs
- Created: 2019-12-17T20:53:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-17T08:04:35.000Z (over 4 years ago)
- Last Synced: 2025-01-28T10:36:54.979Z (5 months ago)
- Topics: autocompletion, fess, suggestor
- Language: SCSS
- Homepage:
- Size: 58.6 KB
- Stars: 1
- Watchers: 10
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.ja.md
Awesome Lists containing this project
README
# Form Assist on Fess
[Fess](https://fess.codelibs.org/) is Enterprise Search Server.
This docker environment provides Form Assist Script on Fess.
## Getting Started
### Setup
```
$ git clone https://github.com/codelibs/docker-formassist.git
$ cd docker-formassist
$ bash ./bin/setup.sh
```
### Start Server
```
$ docker-compose up -d
```
以下のURLへアクセスを確認。
* Fess
* http://localhost/admin
* http://localhost/json
* Script
* http://localhost/formassist/formassist/fess-form-assist.js
* Sample
* http://localhost/formassist/sample.html
### Load script
fess-form-assist.jsをロードします。
```
```
### Sample Code
[sample.html](nginx/static/sample.html)
## Usage
サジェスト/アシスト対象のform群を `fess-form-assist` クラスでラップします。
```
...
```
### サジェストの設定
サジェストを利用するために、サジェスト対象のINPUT要素に `fess-suggest` クラスを設定します。
```
```
`fess-suggest` クラスには下記の属性を設定します。
|属性|説明|
|---|---|
|data-fess_url|FessのJSON APIのURLを設定します。|
|data-label|検索対象のlabelを設定します。|
|data-field|サジェスト対象のフィールド名を設定します。|
|data-results_num|サジェスト結果の表示数を設定します。|
|data-results|サジェスト結果に表示するフィールドを設定します。（複数ある場合はカンマ区切り）|
|data-result_headers|サジェスト結果の各フィールドの項目名を設定します。（複数ある場合はカンマ区切り）|
|data-assist_targets|サジェストを選択した場合にアシストされる要素のIDを設定します。未指定の場合は同一の `fess-form-assist` に属している全てのアシスト要素に適用されます。|
### アシストの設定
サジェスト選択時にアシストされる対象の要素に `fess-assist` クラスを設定します。
```
```
`fess-assit` クラスには下記の属性を設定します。
|属性|説明|
|---|---|
|data-field|アシスト対象のフィールド名を設定します。|
## サジェストのデザイン
`fess-form-assist` クラスの要素に対して `apply-style` クラスを追加することで、サジェストボックスに対してデフォルトのCSSが適用されます。
```
...
```
サジェストボックスの要素は以下の構成になるため、これらの要素に対してスタイルを設定することで `apply-style` を使用せずに独自のCSSを適用出来ます。
```
Field1
Field2
Value1
Value2
Value3
Value4
```