feat: 创建工单时增加文档检索功能

在「新建工单」页面，用户输入标题时，对标题文字，通过 algolia 执行文档检索，返回关联的文档结果。

Author: BinaryHB

modules/NewTicket.js

@@ -1,8 +1,9 @@
-/*global $*/
+/*global $, ALGOLIA_API_KEY*/
 import React from 'react'
 import PropTypes from 'prop-types'
 import {FormGroup, ControlLabel, FormControl, Button, Tooltip, OverlayTrigger} from 'react-bootstrap'
 import AV from 'leancloud-storage/live-query'
+import docsearch from 'docsearch.js'
 
 import {uploadFiles, getTinyCategoryInfo} from './common'
 import {defaultLeanCloudRegion, getLeanCloudRegionText} from '../lib/common'
@@ -24,6 +25,13 @@ export default class NewTicket extends React.Component {
   }
 
   componentDidMount() {
+    docsearch({
+      apiKey: ALGOLIA_API_KEY,
+      indexName: 'leancloud',
+      inputSelector: '.docsearch-input',
+      debug: false // Set debug to true if you want to inspect the dropdown
+    })
+
     this.contentTextarea.addEventListener('paste', this.pasteEventListener.bind(this))
     AV.Cloud.run('checkPermission')
     .then(() => {
@@ -165,7 +173,8 @@ export default class NewTicket extends React.Component {
       <form onSubmit={this.handleSubmit.bind(this)}>
         <FormGroup>
           <ControlLabel>标题</ControlLabel>
-          <input type="text" className="form-control" value={this.state.title} onChange={this.handleTitleChange.bind(this)} />
+          <input type="text" className="form-control docsearch-input" value={this.state.title} 
+             onChange={this.handleTitleChange.bind(this)} />
         </FormGroup>
         <FormGroup>
           <ControlLabel>

package-lock.json

@@ -32,6 +32,7 @@
     "color": "^1.0.3",
     "compression": "^1.6.2",
     "css-loader": "^0.28.4",
+    "docsearch.js": "^2.5.2",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "highlight.js": "^9.10.0",

package.json

@@ -0,0 +1,7 @@
+span.algolia-autocomplete {
+   display: block!important;
+ }
+ .algolia-autocomplete .ds-dropdown-menu {
+   max-width: 100%;
+   min-width: 100%;
+ } 

public/css/docsearch-override.css

@@ -41,7 +41,9 @@ const getIndexPage = (uuid) => {
 <link rel="stylesheet" href="/css/leancloud-base.css">
 <link rel="stylesheet" href="/css/react-datepicker.css">
 <link rel="stylesheet" href="/index.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
 <link rel="stylesheet" href="${process.env.WEBPACK_DEV_SERVER || ''}/app.css">
+<link rel="stylesheet" href="/css/docsearch-override.css">
 <script src="/js/jquery.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
 <div id=app></div>
@@ -54,6 +56,7 @@ const getIndexPage = (uuid) => {
   UUID = '${uuid}'
   ORG_NAME = '${orgName}'
   USE_OAUTH = '${!!process.env.OAUTH_KEY}'
+  ALGOLIA_API_KEY = '${process.env.ALGOLIA_API_KEY}'
 </script>
 <script src='${process.env.WEBPACK_DEV_SERVER || ''}/bundle.js'></script>
 <script>