小程序input联想输入

男娘i 2022-02-03 00:25 310阅读 0赞

转自：[https://www.jianshu.com/p/3f40578cb94b][https_www.jianshu.com_p_3f40578cb94b]

欢迎关注本人公众号和小程序![20190508144123666.png][]

wxml

<view>
      <input class="textinput" bindinput="bindinput" value="{
       {inputValue}}" placeholder="请输入内容" />
    </view>
    
    <scroll-view scroll-y="true" class="scrollview" hidden="{
       {hideScroll}}" style="{
       {arrayHeight>340?'height:340rpx':''}}">
      <view wx:for="{
       {bindSource}}">
        <view id="{
       {item}}" bindtap="itemtap" class="itemview">{
       {item}}</view>
      </view>
    </scroll-view>

js

var wayIndex = -1;
    var school_area = '';
    var grade = '';
    // 当联想词数量较多，使列表高度超过340rpx，那设置style的height属性为340rpx，小于340rpx的不设置height，由联想词列表自身填充
    // 结合上面wxml的<scroll-view>
    var arrayHeight = 0;
    
    Page({
      data: {
        inputValue: '', //点击结果项之后替换到文本框的值
        adapterSource: ["weixin", "wechat", "android", "Android", "IOS", "java", "javascript", "微信小程序", "微信公众号", "微信开发者工具"], //本地匹配源
        bindSource: [], //绑定到页面的数据，根据用户输入动态变化
        hideScroll: true,
      },
      
      //当键盘输入时，触发input事件
      bindinput: function (e) {
        //用户实时输入值
        var prefix = e.detail.value
        //匹配的结果
        var newSource = []
        if (prefix != "") { 
          // 对于数组array进行遍历，功能函数中的参数 `e`就是遍历时的数组元素值。
          this.data.adapterSource.forEach(function (e) { 
            // 用户输入的字符串如果在数组中某个元素中出现，将该元素存到newSource中
            if (e.indexOf(prefix) != -1) {
              console.log(e);
              newSource.push(e)
            }
          })
        };
        // 如果匹配结果存在，那么将其返回，相反则返回空数组
        if (newSource.length != 0) {
          this.setData({
            // 匹配结果存在，显示自动联想词下拉列表
            hideScroll: false,
            bindSource: newSource,
            arrayHeight: newSource.length * 71
          })
        } else {
          this.setData({
            // 匹配无结果，不现实下拉列表
            hideScroll: true,
            bindSource: []
          })
        }
      },
    
      // 用户点击选择某个联想字符串时，获取该联想词，并清空提醒联想词数组
      itemtap: function (e) {
        this.setData({
          // .id在wxml中被赋值为{
       {item}}，即当前遍历的元素值
          inputValue: e.target.id,
          // 当用户选择某个联想词，隐藏下拉列表
          hideScroll: true,
          bindSource: []
        })
      },
    })

如何在input里添加多个候选值呢？请看下篇[小程序input联想输入，可输入多个侯选值][input]

[https_www.jianshu.com_p_3f40578cb94b]: https://www.jianshu.com/p/3f40578cb94b
[20190508144123666.png]: /images/20220203/90a0913d20044aeda0588c1d2e7bd532.png
[input]: https://blog.csdn.net/haohaizijhz/article/details/89951466

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

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

相关阅读

相关微信小程序文本输入＜input/＞详解

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等 1 基本使用 <

柔情只为你懂/ 2023年10月07日 17:36/ 0 赞/ 61 阅读

相关微信小程序-input等输入框禁止输入空格

> 发现表单提交，都是默认允许空格输入，但实际情况下，一般是不能有的，比如修改昵称、name等，有空格的输入，就显得不是那么的友好，比如吃鸡，王者等，昵称都是不允许带有空格符，

小鱼儿/ 2023年07月24日 03:07/ 0 赞/ 19 阅读

相关微信小程序-input框如何输入带有emoji表情功能

//将emoji表情进行转义再发送至后台 var nikeName= '小罗老师%F0%9F%98%82' let regex = /[\uD83C|

╰+哭是因爲堅強的太久メ/ 2023年07月21日 05:56/ 0 赞/ 14 阅读

相关微信小程序使用input

html部分 <view class="item" wx:for="{ {setList}}" wx:key="index"> <text class="l

柔光的暖阳◎/ 2022年11月05日 08:48/ 0 赞/ 222 阅读

相关 elasticsearch 实现联想输入搜索

通常，在项目中需要联想输入（即输入关键字，提示相关词条，类似百度google的搜索）的需求，可能大家都是用的数据库的like '%关键字%‘来实现。但是这样实现有几个问题。

╰+攻爆jí腚メ/ 2022年07月12日 03:29/ 0 赞/ 295 阅读

相关 elasticsearch 实现联想输入搜索

通常，在项目中需要联想输入（即输入关键字，提示相关词条，类似百度google的搜索）的需求，可能大家都是用的数据库的like '%关键字%‘来实现。但是这样实现有几个问题。

我不是女神ヾ/ 2022年07月12日 03:29/ 0 赞/ 456 阅读

相关前端性能优化-input输入框联想匹配请求数据防抖思想详解

当input输入框联想匹配的时候，你如果只写了对应监听事件去做请求，会发现每输入一个字符，页面的数据替换也是迅速的替代，因为数据替换较快，所以还带有抖动的效果，页面数据虽然实时

雨点打透心脏的1/2处/ 2022年02月17日 12:46/ 1 赞/ 687 阅读

相关小程序input联想输入，可输入多个侯选值

wxml <view> <input class="textinput" bindinput="bindinput" value="{

偏执的太偏执、/ 2022年02月03日 00:34/ 0 赞/ 232 阅读

相关小程序input联想输入

转自：[https://www.jianshu.com/p/3f40578cb94b][https_www.jianshu.com_p_3f40578cb94b] 欢迎关注本

男娘i/ 2022年02月03日 00:25/ 0 赞/ 311 阅读

相关微信小程序输入框 input 组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 输入框。该组件是[原生组件][Link 1]，使用时请注意相关限制 <table>

港控/mmm°/ 2021年09月08日 01:10/ 0 赞/ 893 阅读