bootstrap suggest搜索建议插件使用详解
近日因工作需要看了下此插件。 首先下载bootstrap js包。添加此插件的引用。注意css样式要引用,不能忘记。 前台页面代码,因为楼主做的是选项卡切换查询不同的结果。
|
<div class="input-group" style="width:300px">
<input type="text" class="form-control" id="Title">
<div class="input-group-btn">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
</div>
<!-- /btn-group -->
</div>
</td>
</tr> }
$("#Url").val(url + data.id);
});
}
});
});*/
这是楼主根据不同的选项请求查询不同的数据,再在结果中搜索 下面说的就是第二种,是搜索插件内部的请求。 如下: $("#Url").val(url + keyword.id.substring(0,keyword.id.length - 1));
});
}
对应的后台代码: 最终页面显示的结果。 看看以下配置说明可以更改不同的需求。 禁用提示: $("input#test").bsSuggest("disable");
启用提示: $("input#test").bsSuggest("enable"); 销毁插件: $("input#test").bsSuggest("destroy"); 查看版本:$("input#test").bsSuggest("version"); 事件监听onDataRequestSuccess: 当 AJAX 请求数据成功时触发,并传回结果到第二个参数 配置参数参数列表中的值均为插件默认值 / 搜索相关 /
autoSelect: true,//键盘向上/下方向键时,是否自动选择值 allowNoKeyword: true,//是否允许无关键字时请求数据 getDataMethod: 'firstByUrl',//获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取 delayUntilKeyup: false,//获取数据的方式 为 firstByUrl 时,是否延迟到有输入时才请求数据 ignorecase: false,//前端搜索匹配时,是否忽略大小写 effectiveFields: [],//有效显示于列表中的字段,非有效字段都会过滤,默认全部。 effectiveFieldsAlias: {},//有效字段的别名对象,用于 header 的显示 searchFields: [],//有效搜索字段,从前端搜索过滤数据时使用,但不一定显示在列表中。effectiveFields 配置字段也会用于搜索过滤 twoWayMatch: true,// 是否双向匹配搜索。为 true 即输入关键字包含或包含于匹配字段均认为匹配成功,为 false 则输入关键字包含于匹配字段认为匹配成功 multiWord: false,//以分隔符号分割的多关键字支持 / UI / / key / / methods / 至此结束。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |