js搜索框代码

JavaScript021

js搜索框代码,第1张

    /* 问题不够明确 */

    <input class="ipt_search" type="search" placeholder="请输入搜索内容"/>

    <script>

        /* 搜索input */

        var searchIpt = document.getElementsByClassName('ipt_search')[0]

        /* 搜索内容 */

        var searchValue = searchIpt.value

    </script>

首先配置app.json文件配置相应路径：编译后生成相应文件夹、及文件夹内的4个文件，一个文件夹即一个页面。；

所有的js方法都是用bindtap（点击事件）调用的。例：搜索（点击搜索调用a方法）Input文本框的属性：hidden="{{对应js里data中的内容}}。例：hidden="{{!inputShowed}}（ input中的内容不显示） hidden="{{inputShowed}}（显示input中的内容）示例1：先做一个最简单的文本框：在搜索框内输入想要搜索的内容，点击搜索就可以直接获取你想要的内容。

这是一个最简单的搜索框，点击搜索按钮调用接口完成搜索。基础代码如下：wxml

<view><view> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <!-- 搜索框 --> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/> </view> </view> <!-- 搜索按钮,调用搜索查询方法 --> <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view>