您的位置：首页 > Web前端 > BootStrap

基于bootstrap的autocomplete自动提示选择项插件

2016-05-31 00:00 489 查看

该控件借鉴于两位大神：化蝶自在飞和 F_L_F 的讲解，在大神基础上，将我自己使用的情况给贴出来。

相关参数说明：

source：function(query,process){}。query表示当前文本输入框中的字符串，可在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数；

formatItem：function(item){}。对返回数据的具体某个json对象转化为字符串格式，用以显示在提示列表中，返回值：字符串；

setValue：function(item){}。选中提示列表某项时，设置文本输入框中显示的值以及实际需要获取的值。返回值格式：{'data-value':item["输入框显示值的item属性"],'real-value':item["实际需要获取值的item属性"]}，后期可通过文本输入框的real-value属性获取该值；

items：自动完成提示的最大结果集数量，默认：8；

minLength：当前文本输入框中字符串达到该属性值时才进行匹配处理，默认：1；

delay：指定延时毫秒数后，才正真向后台请求数据，以防止输入过快导致频繁向后台请求，默认：500。

1、页面源码

[code=language-html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-2.2.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/bootstrap.autocomplete.js"></script>
<title>选择机构</title>
<script type="text/javascript">
$(function(){
var orgName = $("#autoComplete"), prv = $("#prvId"), org = $("#org"),span = $("#tip");
/**根据用户类型控制是否显示机构名称*/
$("#type").change(function(){
var value = $(this).val();
if(value == 2){//如果是机构用户，则显示选择机构
if(org.is(".hide")) org.removeClass("hide");
}else{//如果不是机构用户，则隐藏选择机构并清空机构值
if(!org.is(".hide")) org.addClass("hide");
org.find("input").val("");
}
});
/**机构名称输入提示选择*/
orgName.autocomplete({
items:6,//自动完成提示的最大结果集数量，默认：8。
source:function(query,process){//query表示当前输入框中的字符串，可在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数；process用于设置提示项。
$.ajax({
type:"post",
url: "${ctx}/organ/listJson.sx",
data: {orgName:query},
dataType: "json",
success: function(json){
return process(json.datas);
}
});
},
formatItem:function(item){return item["orgName"];},//对返回数据的具体某个json对象转化为字符串格式，用以显示在提示列表中，返回值：字符串。
setValue:function(item){return {'data-value':item["orgName"],'real-value'
3ff0
:item["id"]};}//选中提示列表某项时，设置文本输入框中显示的值以及实际需要获取的值。返回值格式：{'data-value':item["输入框显示值的item属性"],'real-value':item["实际需要获取值的item属性"]}，后期可通过文本输入框的real-value属性获取该值；
});
/**保存*/
$("#save").click(function(){
var real = orgName.attr("real-value");//获取真实值
if(typeof(real) != "undefined" && real.length > 0) prv.val(real);//判断真实值存在，则赋值
if(!org.is(".hide") && prv.val()=="" || orgName.attr("data-value") != orgName.val()){//判断需要选择机构并且还没选机构或者选择之后又有改变却没重新选择，出现警示
orgName.focus();
if(span.is(".hide")) span.removeClass("hide");
}else{//判断不需要选择机构或者机构已选择，隐藏警示并提交
if(!span.is(".hide"))span.addClass("hide");
$("#form").submit();
}
});
/**表单验证*/
$("#form").validate({
rules: {
userName: {required: true,remote: "${ctx}/orgUser/checkName.sx"},
type: {required: true}
},
messages: {
userName: {required: "*请输入用户名",remote: "*用户名已存在"},
type: {required: "*请选择用户类型"}
}
});
});
</script>
</head>
<body>
<div class="content_right">
<h2>添加用户</h2>
<form id="form" action="${ctx}/orgUser/insert.sx" method="post">
<p>
<span  class="ht_input text_r">用户类型：</span>
<select class="ht_input" name="type" id="type">
<option  value=''>--请选择--</option>
<option  value='0'>超级用户</option>
<option  value='1'>编辑用户</option>
<option  value='2'>机构用户</option>
</select>
</p>
<p>
<span  class="ht_input text_r">用户名：</span>
<input class="ht_input" type="text" name="userName" value=""/>
</p>
<p class="hide" id="org">
<span  class="ht_input text_r">机构名称：</span>
<input class="ht_input" id="autoComplete" type="text" value="" name="orgName" placeholder="请输入机构名"/>
<span class="hide" style="color:red;padding-left:10px" id="tip">*请正确匹配机构名</span>
<input id="prvId" type="hidden" name="organization.id" value=""/>
</p>
</form>
<p>
<button class="btn mar_r" id="save">保存</button>
</p>
</div>
</body>
</html>

2、后台返回数据例如(我在后台是将数据封装在一个map中返回的)：

[code=language-json]{
"datas": [
{"id": 62,"orgName": "鸿达以太0"},
{"id": 49,"orgName": "鸿达以太1"},
{"id": 48,"orgName": "鸿达以太2"},
{"id": 45,"orgName": "鸿达以太3"},
{"id": 43,"orgName": "鸿达以太4"},
{"id": 31,"orgName": "鸿达以太5"}
]
}

3、页面效果

4、autocomplete.js文件修改的地方：在js文件中的select方法里面添加了如下图的代码，即把选项值也绑到了当前输入框上面，这是为了在提交表单时将其与输入框中的值去作比较，如果两者不同，说明输入框中的值作了修改，但没在选项中选择，此时将不进行表单提交，并提示要重新选择。

5、js文件下载：

修改后的 autocomplete.js下载（密码：DECp）

F_L_F大神提供的 bootstrap.autocomplete.js下载（密码：ZIvG）

6、ajax请求的后台返回数据必须为标准json格式，例如：

[code=language-json][
{"id": 62,"orgName": "鸿达以太0"},
{"id": 49,"orgName": "鸿达以太1"},
{"id": 48,"orgName": "鸿达以太2"},
{"id": 45,"orgName": "鸿达以太3"},
{"id": 43,"orgName": "鸿达以太4"},
{"id": 31,"orgName": "鸿达以太5"}
]

7、参考：

http://www.oschina.net/code/snippet_219811_19025
http://www.oschina.net/code/snippet_269752_55913

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： autocomplete 自动提示提示选项 bootstrap

相关文章推荐

新的分享

章节导航