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]