added autocomplete

components/object/editor/individual/PrefixBasedInput.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {list} from '../../../../data/prefixes';
+import {autocompletelist} from '../../../../data/autocompletes';
+import {Search, Grid, Header} from 'semantic-ui-react';
+import _ from 'lodash';
 
 class PrefixBasedInput extends React.Component {
     constructor(props) {
@@ -10,7 +13,9 @@ class PrefixBasedInput extends React.Component {
             v = this.createDefaultValue(this.props.spec.valueType, this.props.spec.dataType);
         }
         this.state = {
-            value: v
+            value: v,
+            results: [],
+            isLoading: false
         };
     }
     componentDidMount() {
@@ -37,8 +42,8 @@ class PrefixBasedInput extends React.Component {
     }
     createDefaultValue(valueType, dataType) {
         let dynamicDomain = 'http://example.com';
-        if (this.props.config && this.props.config.dynamicResourceDomain) {
-            dynamicDomain = this.props.config.dynamicResourceDomain[0];
+        if (this.props.config && this.props.config.dynamicReautocompletelistDomain) {
+            dynamicDomain = this.props.config.dynamicReautocompletelistDomain[0];
         }
         if (this.props.config && this.props.config.defaultValue) {
             return this.props.config.defaultValue[0];
@@ -113,9 +118,32 @@ class PrefixBasedInput extends React.Component {
         }
 
     }
-    handleChange(event) {
+    resetComponent() {
+        let self = this;
+        this.setState({
+            value: '',
+            results: [],
+            isLoading: false
+        });
+    }
+    //when user clicks on results
+    handleChange(event, result) {
+        this.setState({value: result.title});
+        this.props.onDataEdit(this.applyPrefix(result.title.trim()));
+    }
+    handleSearchChange(event, value) {
         this.props.onDataEdit(this.applyPrefix(event.target.value.trim()));
-        this.setState({value: event.target.value});
+        this.setState({ isLoading: true, value: event.target.value });
+        setTimeout(() => {
+            if (this.state.value.length < 1) return this.resetComponent()
+
+            const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
+            const isMatch = (result) => re.test(result.title)
+            this.setState({
+                isLoading: false,
+                results: _.filter(autocompletelist, isMatch),
+            })
+        }, 500)
     }
     render() {
         let placeholder = '';
@@ -127,9 +155,10 @@ class PrefixBasedInput extends React.Component {
                 placeholder = this.props.placeholder;
             }
         }
+        let { value, results, isLoading } = this.state;
         return (
-            <div className="ui">
-                <input ref="prefixBasedInput" type="text" value={this.preparePrefix(this.state.value)} placeholder={placeholder} onChange={this.handleChange.bind(this)} onKeyDown={this.handleKeyDown.bind(this)}/>
+            <div className="sixteen wide column field">
+                <Search showNoResults={false} icon="cube" ref="prefixBasedInput" type="text" loading={isLoading} value={this.preparePrefix(value)} placeholder={placeholder} onChange={this.handleChange.bind(this)} onKeyDown={this.handleKeyDown.bind(this)} onSearchChange={this.handleSearchChange.bind(this)} results={results}/>
             </div>
         );
     }

data/autocompletes.js

@@ -0,0 +1,103 @@
+module.exports = {
+    autocompletelist: [
+        {title: 'rdf:type'},
+        {title: 'rdfs:label'},
+        {title: 'rdfs:comment'},
+        {title: 'rdfs:seeAlso'},
+        {title: 'owl:sameAs'},
+        {title: 'dcterms:title'},
+        {title: 'dcterms:subject'},
+        {title: 'dcterms:creator'},
+        {title: 'skos:prefLabel'},
+        {title: 'foaf:primaryTopic'},
+        {title: 'foaf:Document'},
+        {title: 'foaf:homepage'},
+        {title: 'foaf:name'},
+        {title: 'foaf:Person'},
+        {title: 'dcterms:description'},
+        {title: 'dcterms:contributor'},
+        {title: 'dcterms:modified'},
+        {title: 'dcterms:isPartOf'},
+        {title: 'dcterms:issued'},
+        {title: 'dcterms:format'},
+        {title: 'dcterms:language'},
+        {title: 'skos:Concept'},
+        {title: 'bibo:Book'},
+        {title: 'void:Dataset'},
+        {title: 'prov:Entity'},
+        {title: 'ldr:config'},
+        {title: 'ldr:FacetsConfig'},
+        {title: 'ldr:ReactorConfig'},
+        {title: 'ldr:ServerConfig'},
+        {title: 'ldr:FacetsPropertyConfig'},
+        {title: 'ldr:dataset'},
+        {title: 'ldr:resource'},
+        {title: 'ldr:property'},
+        {title: 'ldr:list'},
+        {title: 'ldr:label'},
+        {title: 'ldr:datasetLabel'},
+        {title: 'ldr:host'},
+        {title: 'ldr:port'},
+        {title: 'ldr:path'},
+        {title: 'ldr:graphName'},
+        {title: 'ldr:useReasoning'},
+        {title: 'ldr:datasetReactor'},
+        {title: 'ldr:resourceFocusType'},
+        {title: 'ldr:resourceLabelProperty'},
+        {title: 'ldr:maxNumberOfResourcesOnPage'},
+        {title: 'ldr:readOnly'},
+        {title: 'ldr:resourceReactor'},
+        {title: 'ldr:usePropertyCategories'},
+        {title: 'ldr:propertyCategories'},
+        {title: 'ldr:dynamicResourceDomain'},
+        {title: 'ldr:treatAsResourceType'},
+        {title: 'ldr:propertyReactor'},
+        {title: 'ldr:category'},
+        {title: 'ldr:hint'},
+        {title: 'ldr:isHidden'},
+        {title: 'ldr:defaultValue'},
+        {title: 'ldr:allowResourceClone'},
+        {title: 'ldr:allowResourceNew'},
+        {title: 'ldr:allowPropertyNew'},
+        {title: 'ldr:allowNewValue'},
+        {title: 'ldr:allowInlineConfig'},
+        {title: 'ldr:allowExtension'},
+        {title: 'ldr:hasBlankNode'},
+        {title: 'ldr:autoLoadDetails'},
+        {title: 'ldr:objectReactor'},
+        {title: 'ldr:objectIEditor'},
+        {title: 'ldr:objectAEditor'},
+        {title: 'ldr:extendedOEditor'},
+        {title: 'ldr:objectIViewer'},
+        {title: 'ldr:objectAViewer'},
+        {title: 'ldr:extendedOViewer'},
+        {title: 'ldr:shortenURI'},
+        {title: 'ldr:asWikipedia'},
+        {title: 'ldr:dateTimeFormat'},
+        {title: 'ldr:height'},
+        {title: 'ldr:width'},
+        {title: 'ldr:allowUserDefinedValue'},
+        {title: 'ldr:calendarFormat'},
+        {title: 'BasicDBpediaView'},
+        {title: 'BasicDateTimeView'},
+        {title: 'BasicImageView'},
+        {title: 'BasicLinkedIndividualView'},
+        {title: 'BasicMapView'},
+        {title: 'LanguageView'},
+        {title: 'PasswordView'},
+        {title: 'ThreeLetterCountryView'},
+        {title: 'ToggleView'},
+        {title: 'TwoLetterCountryView'},
+        {title: 'BasicAggregateMapView'},
+        {title: 'DBpediaGoogleMapView'},
+        {title: 'BasicCalendarInput'},
+        {title: 'BasicTextareaInput'},
+        {title: 'DBpediaInput'},
+        {title: 'LanguageInput'},
+        {title: 'PasswordInput'},
+        {title: 'PrefixBasedInput'},
+        {title: 'ToggleEdit'},
+        {title: 'TagListBrowser'},
+        {title: 'CheckListBrowser'}
+    ]
+}