搜索

collect_information/src/pages/police/index/index.vue.bak

@@ -1,21 +1,19 @@
 <template>
-  <view class="search" id="search">
-    <nut-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></nut-input>
-    <view v-if="valueInput">
+  <div class="search" id="search">
+    <a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input>
+    <div v-if="valueInput">
       <ul>
         <li v-for="item in searchResults" :key="item.id">{{item}}</li>
       </ul>
-    </view>
-    <view v-else >
+    </div>
+    <div v-else >
       没有找到相关结果
-    </view>
-  </view>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import './index.scss'
-import { ref} from "vue";
+import {onMounted, ref,} from "vue";
 const valueInput = ref('')
-// '齐家园','刘德华','张学友','黎明','家具城','左岸春天','麦德龙商城','世纪酒店','四方小学','海洋半岛'
 const list = ref([])
 const dataList = ref([
   {
@@ -66,7 +64,7 @@ const dataList = ref([
     value:'明德小学'
   },{
     id:12,
-    value:'希望小学'
+    value:'希望小学',
   }
 ])
 const searchResults =  ref([])
@@ -74,21 +72,37 @@ const searchInput = (e:any)=>{
   valueInput.value = e.target.value
   if (!valueInput.value) {
     searchResults.value = []
-    return [];
+    return;
   }else{
-    dataList.value.map((item)=>{
-      return list.value.push(item.value)
-    })
     searchResults.value =  list.value.filter(item =>
-      item.toLowerCase().includes(valueInput.value.toLowerCase())
+        item.toLowerCase().includes(valueInput.value.toLowerCase())
     );
   }
-  // console.log(searchResults.value)
 }
+onMounted(()=>{
+  dataList.value.map((item)=>{
+    return list.value.push(item.value)
+  })
+})
 </script>
 
 
 
 <style scoped lang="scss">
-
+.search{
+  padding: 0 10px;
+  overflow: hidden;
+  border: 1px solid #4e71f2;
+  margin: 1px 5px;
+  border-radius: 10px;
+  width: 30%;
+  .ceShi{
+    height: 300px;
+    background: #ccc;
+  }
+}
+.nut-input{
+  padding: 20rpx 20rpx;
+  margin: 5px 0;
+}
 </style>

securityManagement/src/views/test.vue

@@ -1,7 +1,114 @@
 <template>
-    <div style="margin: 100px auto;width: 500px">
+  <div class="search" id="search">
+    <a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input>
+    <div v-if="valueInput">
+      <ul>
+        <li v-for="item in searchResults" :key="item.id">{{item}}</li>
+      </ul>
     </div>
+    <div v-else >
+      没有找到相关结果
+    </div>
+  </div>
 </template>
-<script lang="ts" setup>
+<script setup lang="ts">
+import {onMounted, ref,} from "vue";
+const valueInput = ref('')
+const list = ref([])
+const dataList = ref([
+  {
+    id:0,
+    value:'齐家园'
+  },
+  {
+    id:1,
+    value:'刘德华'
+  },
+  {
+    id:2,
+    value:'张学友'
+  },{
+    id:3,
+    value:'黎明'
+  },
+  {
+    id:4,
+    value:'家具城'
+  },
+  {
+    id:5,
+    value:'左岸春天'
+  },
+  {
+    id:6,
+    value:'麦德龙商城'
+  },
+  {
+    id:7,
+    value:'世纪酒店'
+  },
+  {
+    id:8,
+    value:'四方小学'
+  },
+  {
+    id:9,
+    value:'海洋半岛'
+  },
+  {
+    id:10,
+    value:'育英小学'
+  },
+  {
+    id:11,
+    value:'明德小学'
+  },{
+    id:12,
+    value:'希望小学',
+  }
+])
+const searchResults =  ref([])
+const searchInput = (e:any)=>{
+  valueInput.value = e.target.value
+  if (!valueInput.value) {
+    searchResults.value = []
+    return;
+  }else{
+    searchResults.value =  list.value.filter(item =>
+        item.toLowerCase().includes(valueInput.value.toLowerCase())
+    );
+  }
+}
+// watch(()=>valueInput.value,(value)=>{
+//    if(!value){
+//      searchResults.value = []
+//    }
+// })
+
+onMounted(()=>{
+  dataList.value.map((item)=>{
+    return list.value.push(item.value)
+  })
+})
 </script>
 
+
+
+<style scoped lang="scss">
+.search{
+  padding: 0 10px;
+  overflow: hidden;
+  border: 1px solid #4e71f2;
+  margin: 1px 5px;
+  border-radius: 10px;
+  width: 30%;
+  .ceShi{
+    height: 300px;
+    background: #ccc;
+  }
+}
+.nut-input{
+  padding: 20rpx 20rpx;
+  margin: 5px 0;
+}
+</style>