<template>
  <view class="search" id="search">
    <nut-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></nut-input>
    <view v-if="valueInput">
      <ul>
        <li v-for="item in searchResults" :key="item.id">{{item}}</li>
      </ul>
    </view>
    <view v-else >
      没有找到相关结果
    </view>
  </view>
</template>
<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())
    );
  }
}
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>
