小程序-input实现下拉查询

秒速五厘米 2022-10-05 13:46 241阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70][]

1.wxml

<view class='uinn'>

<view class="weui-search-bar flex-row uinn bg\_white mar-t">

<view class="weui-search-bar\_\_form flex1 flex-row">

<icon class="weui-icon-search\_in-box" type="clear" size="14"></icon>

<input type="text" class="weui-search-bar\_\_input" placeholder="请输入查询信息" value="\{ \{inputVal\}\}" bindinput="inputTyping" class='flex1 mar-l' />

<scroll-view class='scroll-view' wx:if='\{ \{viewShowed\}\}' scroll-y>

<view wx:for="\{ \{carList\}\}" wx:key="\{ \{index\}\}" class="msg-item " >

<view class='user-name' bindtap='name' data-index="\{ \{index\}\}" >\{ \{item\}\}</view>

</view>

</scroll-view>

</view>

<view class="weui-search-bar\_\_cancel-btn" bindtap="hideInput">取消</view>

</view>

2.css

.scroll-view \{

width: 50%;

position: absolute;

top: 80rpx;

left: 30rpx;

background-color: white;

-moz-box-shadow: 0px 0px 2px \#e2e2e2;

-webkit-box-shadow: 0px 0px 2px \#e2e2e2;

box-shadow: 0px 0px 2px \#e2e2e2;

.user-name \{

width: 100%;

padding: 20rpx;

font-size: 33rpx;

border-bottom: 1px solid \#e2e2e2;

3.js

var app = getApp()

Page(\{

data: \{

viewShowed: false, //显示结果view的状态

inputVal: "", // 搜索框值

catList: \[\], //搜索渲染推荐数据

list1: \['1', '11','111', '2', '22', '李毅22', '王二3', '王五', '王一', '王三'\]

\},

onLoad: function() \{\},

// 隐藏搜索框样式

hideInput: function() \{

this.setData(\{

inputVal: "",

viewShowed: false,

\});

\},

// 键盘抬起事件2

inputTyping: function(e) \{

console.log("input-----",e)

var value = e.detail.value

var that = this;

var list1 = that.data.list1

if (value == '') \{

that.setData(\{

viewShowed: false,

\});

\} else \{

//“这里需要特别注意，不然在选中下拉框值的时候，下拉框又出现”

if (e.detail.cursor) \{ //e.detail.cursor表示input值当前焦点所在的位置

var arr = \[\];

for (var i = 0; i < list1.length; i++) \{

if (list1\[i\].indexOf(value) >= 0) \{

arr.push(list1\[i\]);

console.log(arr)

that.setData(\{

viewShowed: true,

carList: arr

\});

\},

// 获取选中推荐列表中的值

name: function(res) \{

console.log(res.currentTarget.dataset.index);

var index = res.currentTarget.dataset.index

var that = this;

that.setData(\{

inputVal: that.data.carList\[index\],

viewShowed: false,

\})

\},

\});

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70]: /images/20221005/9106c75a3b0e4baabd507705f3152246.png

小程序-input实现下拉查询

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关小程序input自动聚焦拉起键盘

相关微信小程序实现下拉刷新功能

相关微信小程序实现下拉刷新

相关小程序下拉刷新怎么实现？

相关小程序自定义下拉框

相关小程序-input实现下拉查询

相关微信小程序实现上拉加载下拉刷新

相关 mpvue - 小程序下拉刷新配置

相关小程序下拉列表框菜单

相关微信小程序下拉刷新