wxml
<view>
? <input id='searchInput' type="text" placeholder="輸入企業(yè)/商品名稱"? bindinput="bindKeyInput" value="{{inputValue}}" data-statu="open" />
</view>
<!--mask-->
<view class="input_screen" bindtap="bindKeyInput" data-statu="close" wx:if="{{showInputStatus}}"></view>
<!-- auto-completion? -->
<view class="scrollview"? wx:if="{{showInputStatus}}">
? ? ? ? <view? wx:for="{{bindSource}}" wx:key="{{id}}">
? ? ? ? ? ? ? ? <view id="{{item.companyname}}"? class="itemview" bindtap="itemtap" data-statu="close" >
? ? ? ? ? ? ? ? ? ? {{item.companyname}}?
? ? ? ? ? ? ? ? </view>
? ? ? ? </view>
</view>
js
data: {
? ? showInputStatus: false,
? ? inputValue: '',//點擊結果項之后替換到文本框的值
? ? // adapterSource: ["app", "application", "apply", "weixin", "WeiXin"],//本地匹配源
? ? adapterSource: [],//本地匹配源a
? ? bindSource: [],//綁定到頁面的數(shù)據(jù)，根據(jù)用戶輸入動態(tài)變化
? },
? clean: function () {
? ? this.setData({
? ? ? prefix: '',
? ? ? inputValue:''
? ? })
? },
? bindKeyInput: function (e) {
? ? // 當前輸入的狀態(tài)
? ? var currentInputStatu = e.currentTarget.dataset.statu;
? ? // console.log(e.currentTarget.id)
? ? var prefix = e.detail.value//用戶實時輸入值
? ? this.setData({
? ? ? prefix:e.detail.value
? ? })
? ? console.log(prefix)
? ? var newSource = []//匹配的結果
? ? var bindSource = []
? ? if (prefix != "") {
? ? ? var self = this
? ? ? self.setData(
? ? ? ? {
? ? ? ? ? showBtnStatus1: false,
? ? ? ? ? showBtnStatus2: true
? ? ? ? }
? ? ? );
? ? ? wx.request({
? ? ? ? url: app.globalData.requestur2,? //全局地址
? ? ? ? method: 'get',
? ? ? ? data: {
? ? ? ? ? method: 'vagueSelect',
? ? ? ? ? company: prefix
? ? ? ? },
? ? ? ? success: function (info) {
? ? ? ? ? // 將獲取數(shù)據(jù)顯示到視圖中
? ? ? ? var bindSource = self.data.bindSource;
? ? ? ? //bindSource.push(info.data.info);
? ? ? ? console.log(info.data.info)
? ? ? ? bindSource = info.data.info
? ? ? ? ? self.setData({
? ? ? ? ? ? bindSource: bindSource
? ? ? ? ? })
? ? ? ? console.log(bindSource)
? ? ? ? ? // 隱藏提示
? ? ? ? ? wx.hideLoading();
? ? ? ? }
? ? ? });
? ? } else {
? ? ? currentInputStatu = "close";
? ? ? this.setData(
? ? ? ? {
? ? ? ? ? isScroll: true,
? ? ? ? ? showBtnStatus1: true,
? ? ? ? ? showBtnStatus2: false
? ? ? ? }
? ? ? );
? ? }
? ? if (newSource.length != 0) {
? ? ? this.setData({
? ? ? ? bindSource: newSource
? ? ? })
? ? } else {
? ? ? this.setData({
? ? ? ? bindSource: []
? ? ? })
? ? ? currentInputStatu = "close";
? ? ? this.setData(
? ? ? ? {
? ? ? ? ? isScroll: "{{false}}"
? ? ? ? }
? ? ? );
? ? }
? ? //關閉
? ? if (currentInputStatu == "close") {
? ? ? this.setData(
? ? ? ? {
? ? ? ? ? showInputStatus: false,
? ? ? ? ? isScroll: true
? ? ? ? }
? ? ? );
? ? }
? ? // 顯示
? ? if (currentInputStatu == "open") {
? ? ? this.setData(
? ? ? ? {
? ? ? ? ? showInputStatus: true,
? ? ? ? ? isScroll: "{{false}}"
? ? ? ? }
? ? ? );
? ? }
? },
? button:function(e) {
? ? var that = this
? ? var prefix = this.data.inputValue
? ? console.log(prefix)
? ? if (prefix == '') {
? ? ? wx.showToast({
? ? ? ? title: '請輸入公司名稱',
? ? ? })
? ? } else {
? ? ? wx.navigateTo({
? ? ? ? url: '/pages/serch/list?comname=' + prefix
? ? ? })
? ? ? that.clean()
? ? }
? },
? //點擊選型確定input值
? itemtap: function (e) {
? ? var currentInputStatu = e.currentTarget.dataset.statu;
? ? console.log(e.target)
? ? this.setData({
? ? ? inputValue: e.target.id,
? ? ? bindSource: []
? ? })
? ? var self = this
? ? console.log(e.target.id)
? ? //關閉
? ? if (currentInputStatu == "close") {
? ? ? this.setData(
? ? ? ? {
? ? ? ? ? showInputStatus: false,
? ? ? ? ? isScroll: true
? ? ? ? }
? ? ? );
? ? }
? ? // 顯示
? ? if (currentInputStatu == "open") {
? ? ? this.setData(
? ? ? ? {
? ? ? ? ? showInputStatus: true,
? ? ? ? ? isScroll: "{{false}}"
? ? ? ? }
? ? ? );
? ? }
? },
