jquery mobile实现带搜索功能的下拉框求代码

<div style="padding: 100px 100px 10px">

<form class="bs-example bs-example-form" role="form">

<div class="row">

<div class="col-lg-6">

<div class="input-group">

<div class="input-group-btn">

<button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>

<button type="button" class="btn btn-default

dropdown-toggle" data-toggle="dropdown" tabindex="-1">

<span class="caret"></span>

<span class="sr-only">切换下拉菜单</span>

</button>

<ul class="dropdown-menu">

<li>

<a href="#">功能</a>

</li>

<li>

<a href="#">另一个功能</a>

</li>

<li>

<a href="#">其他</a>

</li>

<li class="divider"></li>

<li>

<a href="#">分离的链接</a>

</li>

</ul>

</div><!-- /btn-group -->

<input type="text" class="form-control">

</div><!-- /input-group -->

</div><!-- /.col-lg-6 -->

<br>

<div class="col-lg-6">

<div class="input-group">

<input type="text" class="form-control">

<div class="input-group-btn">

<button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>

<button type="button" class="btn btn-default

dropdown-toggle" data-toggle="dropdown" tabindex="-1">

<span class="caret"></span>

<span class="sr-only">切换下拉菜单</span>

</button>

<ul class="dropdown-menu pull-right">

<li>

<a href="#">功能</a>

</li>

<li>

<a href="#">另一个功能</a>

</li>

<li>

<a href="#">其他</a>

</li>

<li class="divider"></li>

<li>

<a href="#">分离的链接</a>

</li>

</ul>

</div><!-- /btn-group -->

</div><!-- /input-group -->

</div><!-- /.col-lg-6 -->

</div><!-- /.row -->

</form>

</div>

具体见http://www.runoob.com/bootstrap/bootstrap-input-groups.html

在iview中Table表格中有一个列描述数据对象（render），render是 columns 中的一项，自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。

当然官网提供一个简单的使用方法： iView - A high quality UI Toolkit based on Vue.js

现在我们来实现，添加一个Dropdown 下拉菜单：

这里要注意下我描述的，1，2，3，4点，先不急，咱们先看下官网这个Dropdown组件

不难看出，讲一个组件写成render其实很简单，只需要写成这样

最后就是要注意下，绑定事件了，这里的on要写成nativeOn，才可以出发事件。

不知道  小伙伴看懂了原理吗？不明白就留言，我会及时回复你的。