超级的input,拥有弹出层滚动选择,ajax建议的autocomplete,效果图来两张
autocomplete,自动匹配
弹出层,选择所有可选择的
1. 载入必要的文件
public/img/js/lib/cmstop.suggest.js
public/img/js/lib/suggest/style.css
2. 使用
html代码
<input width="300" # 宽度
url="?app=system&controller=template&action=suggestSource" # 匹配获取数据的url
allUrl="?app=system&controller=template&action=pageSource" # 弹出层滚动数据url
paramKeyword="keyword" # 关键字传参键值
paramPage="page" # 分页传参键值
name="source" class="suggest" />
</code
JS代码
<code jquery>
$(‘.suggest’).suggest({
width:<int>,
url:<string>,
paramKeyword:<string>,
allUrl:<string>,
paramPage:<string>, // 以上参数是统一的默认配置,最终生效配置取element的属性
getExtraData:function(){} // 发送请求时,获得多余的传递数据
})
服务器端返回数据约定
suggest数据<Array>: // 建议返回10条以下的数据给我
[
{text:<string>,value:<mixed>},
{text:<string>,value:<mixed>},
{text:<string>,value:<mixed>}
]
分页每页记录数20,我已经写死了,不好意思,所以查询的时候请用pagesize=20
滚动分页数据<Hash>:
{
total:<int>, // 所有记录数, 一般在第一次请求时需要,但如果不知何时需要,就每次都发送吧
data:[] // 如suggest数据
}