uniapp模仿下拉框实现文字联想功能 - uniapp输入联想（官方样式-附源码）

一、效果

废话不多说，上���果图：

• 在下方的：
• 在上方的：

  二、源码

  一般是个输入框，输入关键词，下拉一个搜索列表。

  ElementUI有提供，但uniapp官网没提供这么细，特简单扩展了一下：

  1、/ components / input-search.vue

  加载中...请求失败，请稍后重试！请输入关键词联想~没有相关数据！{{emptyTips}}{{formatItemName(item)}}export default {name: "input-search",......}$uni-border-3: #e5e5e5;......

  2、/ pages / xxx / demo.vue

  import inputSearch from "@/components/input-search.vue";export default {components: {inputSearch,},data() {handleResult: "",},methods: {confirmInputSearch(val, key) {this.$set(this, key, val);},},//......},

  源码链接：uniapp模仿下拉框实现文字联想功能 - uniapp输入联想（官方样式-附源码）

  源码链接：uniapp模仿下拉框实现文字联想功能 - uniapp输入联想（官方样式-附源码）

  源码链接：uniapp模仿下拉框实现文字联想功能 - uniapp输入联想（官方样式-附源码）

  三、参数说明：

  名称	类型	说明
  type	int	词条类型，如果同个页面有多个联想， 且联想内容不一致时，用此字段与接口对接
  value	String	词条内容
  algin	String	null | top，弹出框的方向，默认bottom
  emptyTips	String	当词条内容为空时，显示的文本内容（未纳入）
  @confirm	Method	选中事件，点击了联想内容的一个。返回联想内容text

  四、续

  • 功能优势：

    • 官方样式，好看啦
    • 可扩展
    • 支持input、textarea等控件

    • 扩展

      • 输出格式 format
      • 禁用 item内容
      • 未完待续…

        ---

        [The end]