added op data file

Author: dharmanextsteps

op_merge.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "autoprefixer": "7.1.6",
+    "axios": "^0.18.0",
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",

package-lock.json

@@ -107,7 +107,7 @@ body {
       margin-left: 10px;
       background-color: #0C7EAF;
       color: white;
-      border-radius: 5px;
+      border-radius: 10px;
   }
 
   form {

package.json

@@ -1,6 +1,8 @@
 import React from 'react'
 import Autosuggest from 'react-autosuggest';
 import './AutoSuggest.css'
+import ListResults from './ListResults'
+import axios from 'axios'
 
 // Imagine you have a list of languages that you'd like to autosuggest.
 const languages = [
@@ -15,24 +17,24 @@ const languages = [
 ]
 
 // Teach Autosuggest how to calculate suggestions for any given input value.
-const getSuggestions = value => {
-  const inputValue = value.trim().toLowerCase();
-  const inputLength = inputValue.length;
+// const getSuggestions = value => {
+//   const inputValue = value.trim().toLowerCase();
+//   const inputLength = inputValue.length;
 
-  return inputLength === 0 ? [] : languages.filter(lang =>
-    lang.name.toLowerCase().slice(0, inputLength) === inputValue
-  );
-};
+//   return inputLength === 0 ? [] : languages.filter(lang =>
+//     lang.name.toLowerCase().slice(0, inputLength) === inputValue
+//   );
+// };
 
 // When suggestion is clicked, Autosuggest needs to populate the input
 // based on the clicked suggestion. Teach Autosuggest how to calculate the
 // input value for every given suggestion.
-const getSuggestionValue = suggestion => suggestion.name;
+const getSuggestionValue = suggestion => suggestion;
 
 // Use your imagination to render suggestions.
 const renderSuggestion = suggestion => (
   <div >
-    {suggestion.name}
+    {suggestion}
   </div>
 );
 
@@ -47,11 +49,52 @@ class AutoSuggest extends React.Component {
     // and they are initially empty because the Autosuggest is closed.
     this.state = {
       value: '',
-      suggestions: []
+      suggestions: [],
+      showResults: false
     };
   }
 
   onChange = (event, { newValue }) => {
+    var suggestionJson = {
+      "suggest": {
+        "text" : "plastc crd",
+        "param" : {
+          "phrase" : {
+            "field" : "ParameterValueForSearch.trigram",
+            "size" : 5,
+            "direct_generator" : [ {
+              "field" : "ParameterValueForSearch.trigram",
+              "suggest_mode" : "always"
+            }]
+          }
+        },
+        "name" : {
+          "phrase" : {
+            "field" : "NodeName.trigram",
+            "size" : 5,
+            "direct_generator" : [ {
+              "field" : "NodeName.trigram",
+              "suggest_mode" : "always"
+            }]
+          }
+        },
+          "title" : {
+          "phrase" : {
+            "field" : "NodeTitle.trigram",
+            "size" : 5,
+            "direct_generator" : [ {
+              "field" : "NodeTitle.trigram",
+              "suggest_mode" : "always"
+            }]
+          }
+        }
+      }
+    }
+    newValue.length > 2 ? suggestionJson.suggest.text=newValue : null
+    axios.post("http://localhost:9200/nodes/node_details/_search", suggestionJson)
+    .then((response)=>{
+      console.log(response.data.suggest)
+    })
     this.setState({
       value: newValue
     });
@@ -60,8 +103,9 @@ class AutoSuggest extends React.Component {
   // Autosuggest will call this function every time you need to update suggestions.
   // You already implemented this logic above, so just use it.
   onSuggestionsFetchRequested = ({ value }) => {
+
     this.setState({
-      suggestions: getSuggestions(value)
+      suggestions: ['apple', 'ball']
     });
   };
 
@@ -76,6 +120,7 @@ class AutoSuggest extends React.Component {
     // api call to get final suggestions
     event.preventDefault()
     console.log(event, str, 'api call to be made')
+    this.setState({showResults: true})
   }
 
   render() {
@@ -102,6 +147,11 @@ class AutoSuggest extends React.Component {
         />
         <button type='submit'>Search</button>
       </form>
+      {
+        this.state.showResults
+        ? <ListResults />
+        : null
+      }
       </div>
     );
   }

src/AutoSuggest.css

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ListResults = () => {
+    return (
+        <div>
+            List some
+        </div>
+    )
+}
+
+export default ListResults