diff --git a/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/ServiceController.java b/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/ServiceController.java
index ae9069fe0f70911b22321d5b9e8f380a76fc2cc6..d751594e9fabbccdf5f630b5b2024a5482cffa68 100644
--- a/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/ServiceController.java
+++ b/dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/ServiceController.java
@@ -63,18 +63,28 @@ public class ServiceController {
     @RequestMapping(value = "/service/{service}", method = RequestMethod.GET)
     public ServiceDetailDTO serviceDetail(@PathVariable String service, @PathVariable String env) {
         service = service.replace(Constants.ANY_VALUE, Constants.PATH_SEPARATOR);
+        String group = null;
+        String version = null;
+        String interfaze = service;
+        int i = interfaze.indexOf("/");
+        if (i >= 0) {
+            group = interfaze.substring(0, i);
+            interfaze = interfaze.substring(i + 1);
+        }
+        i = interfaze.lastIndexOf(":");
+        if (i >= 0) {
+            version = interfaze.substring(i + 1);
+            interfaze = interfaze.substring(0, i);
+        }
         List<Provider> providers = providerService.findByService(service);
 
         List<Consumer> consumers = consumerService.findByService(service);
 
-        Map<String, String> info = ConvertUtil.serviceName2Map(service);
         String application = null;
         if (providers != null && providers.size() > 0) {
             application = providers.get(0).getApplication();
         }
-        MetadataIdentifier identifier = new MetadataIdentifier(info.get(Constants.INTERFACE_KEY),
-                                                                      info.get(Constants.VERSION_KEY),
-                                                                      info.get(Constants.GROUP_KEY), Constants.PROVIDER_SIDE, application);
+        MetadataIdentifier identifier = new MetadataIdentifier(interfaze, version, group, Constants.PROVIDER_SIDE, application);
         String metadata = providerService.getProviderMetaData(identifier);
         ServiceDetailDTO serviceDetailDTO = new ServiceDetailDTO();
         serviceDetailDTO.setConsumers(consumers);
diff --git a/dubbo-admin-ui/src/components/ServiceSearch.vue b/dubbo-admin-ui/src/components/ServiceSearch.vue
index 9d8f313f1503ec43f1cc841ed6a6923124c0f584..92880096d13b13980469c7ec0088e3505a81ae05 100644
--- a/dubbo-admin-ui/src/components/ServiceSearch.vue
+++ b/dubbo-admin-ui/src/components/ServiceSearch.vue
@@ -91,7 +91,7 @@
                     small
                     class="tiny"
                     outline
-                    @click="toTestService(props.item)"
+                    :href='toTestService(props.item)'
                   >
                     {{$t('test')}}
                   </v-btn>
@@ -286,8 +286,15 @@
         })
       },
       toTestService (item) {
-        const service = item.service
-        this.$router.push(`/test/?service=${service}`)
+        let base = '#/test'
+        let query = '?service=' + item.service
+        if (item.group) {
+          query = query + '&group=' + item.group
+        }
+        if (item.version) {
+          query = query + '&version=' + item.version
+        }
+        return base + query
       }
     },
     mounted: function () {
diff --git a/dubbo-admin-ui/src/components/test/ServiceTest.vue b/dubbo-admin-ui/src/components/test/ServiceTest.vue
index 3e4fb207e8daa3a3ce48b5a8eeac8e9482d6da19..60fb681b9881f336d62eb1f5225b09c4ca7818d9 100644
--- a/dubbo-admin-ui/src/components/test/ServiceTest.vue
+++ b/dubbo-admin-ui/src/components/test/ServiceTest.vue
@@ -20,23 +20,54 @@
       <v-flex lg12>
         <breadcrumb title="serviceTest" :items="breads"></breadcrumb>
       </v-flex>
-      <v-flex xs12>
-        <v-autocomplete
-          flat
-          hide-no-data
-          v-model="service"
-          :loading="loading"
-          :search-input.sync="filter"
-          :hint="$t('testModule.searchServiceHint')"
-          :items="services"
-          item-value="service"
-          item-text="service"
-          :label="$t('placeholders.searchService')"
-          persistent-hint
-          @keyup.enter="search"
-          clearable
-        ></v-autocomplete>
-      </v-flex>
+      <v-layout row wrap>
+        <v-flex lg12>
+          <v-card flat color="transparent">
+            <v-card-text>
+              <v-form>
+                <v-layout row wrap>
+                  <v-combobox
+                    id="serviceTestSearch"
+                    :loading="searchLoading"
+                    :items="typeAhead"
+                    :search-input.sync="input"
+                    v-model="filter"
+                    flat
+                    append-icon=""
+                    hide-no-data
+                    :hint="$t('testModule.searchServiceHint')"
+                    :label="$t('placeholders.searchService')"
+                    @keyup.enter="submit"
+                  ></v-combobox>
+                  <v-btn @click="submit" color="primary" large>{{ $t('search') }}</v-btn>
+                </v-layout>
+              </v-form>
+            </v-card-text>
+          </v-card>
+        </v-flex>
+      </v-layout>
+      <!--<v-flex xs12>-->
+        <!--<search v-model="filter" :label="$t('placeholders.searchService')"-->
+                <!--:hint="$t('testModule.searchServiceHint')"-->
+                <!--:submit="search"></search>-->
+      <!--</v-flex>-->
+      <!--<v-flex xs12>-->
+        <!--<v-autocomplete-->
+          <!--flat-->
+          <!--hide-no-data-->
+          <!--v-model="service"-->
+          <!--:loading="loading"-->
+          <!--:search-input.sync="filter"-->
+          <!--:hint="$t('testModule.searchServiceHint')"-->
+          <!--:items="services"-->
+          <!--item-value="service"-->
+          <!--item-text="service"-->
+          <!--:label="$t('placeholders.searchService')"-->
+          <!--persistent-hint-->
+          <!--@keyup.enter="search"-->
+          <!--clearable-->
+        <!--&gt;</v-autocomplete>-->
+      <!--</v-flex>-->
       <v-flex xs12>
         <h3>{{$t('methods')}}</h3>
       </v-flex>
@@ -78,7 +109,11 @@
     },
     data () {
       return {
-        filter: this.$route.query['service'] || '',
+        typeAhead: [],
+        input: null,
+        searchLoading: false,
+        timerID: null,
+        filter: '',
         breads: [
           {
             text: 'serviceSearch',
@@ -90,11 +125,36 @@
         service: null,
         methods: [],
         services: [],
-        searchKey: this.$route.query['service'] || '*',
         loading: false
       }
     },
     methods: {
+      querySelections (v) {
+        if (this.timerID) {
+          clearTimeout(this.timerID)
+        }
+        // Simulated ajax query
+        this.timerID = setTimeout(() => {
+          if (v && v.length >= 4) {
+            this.searchLoading = true
+            this.typeAhead = this.$store.getters.getServiceItems(v)
+            this.searchLoading = false
+            this.timerID = null
+          } else {
+            this.typeAhead = []
+          }
+        }, 500)
+      },
+      submit () {
+        this.filter = document.querySelector('#serviceTestSearch').value.trim()
+        if (this.filter) {
+          let filter = this.filter.replace('/', '*')
+          this.search(filter)
+        } else {
+          return false
+        }
+      },
+
       setHeaders: function () {
         this.headers = [
           {
@@ -119,14 +179,11 @@
           }
         ]
       },
-      search () {
-        if (!this.filter) {
+      search (filter) {
+        if (!filter) {
           return
         }
-        this.$router.replace({
-          query: { service: this.filter }
-        })
-        this.$axios.get('/service/' + this.filter).then(response => {
+        this.$axios.get('/service/' + filter).then(response => {
           this.service = response.data
           this.methods = []
           if (this.service.metadata) {
@@ -185,18 +242,25 @@
       }
     },
     watch: {
+      input (val) {
+        this.querySelections(val)
+      },
       area () {
         this.setHeaders()
-      },
-      filter () {
-        this.searchServices()
-      },
-      searchKey () {
-        this.search()
       }
     },
-    created () {
-      this.search()
+    mounted () {
+      this.$store.dispatch('loadServiceItems')
+      let query = this.$route.query
+      this.filter = query['service']
+      if ('group' in query) {
+        this.filter = query['group'] + '/' + this.filter
+      }
+      if ('version' in query) {
+        this.filter = this.filter + ':' + query['version']
+      }
+
+      this.search(this.filter.replace('/', '*'))
     }
   }
 </script>