小程序搜索功能（选择国家地区）

最新推荐文章于 2025-06-22 21:21:52 发布

小山羊~

最新推荐文章于 2025-06-22 21:21:52 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/qq_21747731/article/details/91363860

小程序专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在小程序中实现搜索功能，并且详细讲解了如何集成国家和地区的选择，让用户能根据地理位置进行定制化的搜索体验。内容涵盖前端开发中的组件设计、API调用以及数据处理等关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--  搜索框  -->
<view class='search'>
    <image class="" src='../../images/search.jpg'></image>
    <input type='text' placeholder='请输入您想要的内容' confirm-type='search' value="{{inputValue}}" bindinput='inputBind'></input>

</view>

 //搜索框文本内容显示
  inputBind: function (event) {
    this.setData({
      inputValue: event.detail.value
    })
    console.log('bindInput' + this.data.inputValue)
    this.query();
  },

data: {
    show1: '',
    show: '',
    shows: '',
    showJsonList: [],
    checkPage: '',
    inputValue: '', //搜索的内容
    // currentTab: 0
    result: [],
    isShow: false,
    toView: ''
  },

/**
   * 搜索执行按钮
   */
  query: function () {
    if (this.data.inputValue == '') {
      this.setData({
        isShow: false
      })
      return;
    }
    console.log(this.data.inputValue, ' this.data.result');
    var that = this
    that.setData({
      result: [],
      isShow: true
    })
    var val = [];
    console.log(this.data.inputValue, ' this');
    for (var i = 1; i < this.data.showJsonList.length; i++) {
      for (var j = 0; j < this.data.showJsonList[i].data.length; j++) {

        var searchTitle = this.data.showJsonList[i].data[j].chinese_name;
        if (searchTitle.indexOf(this.data.inputValue) != -1) {
          val.push(this.data.showJsonList[i].data[j])

          // this.data.result.push( this.data.showJsonList[i].data[j]);
          // console.log(val, 'val');

        }
      }
    }
    that.setData({
      result: val
    })


  },