文献种类:专题技术文献
开发工具与关键技术:vs2015,javascript
归档时间: 2019 年 03月 25 日
Input自动完成事件
根据大部分项目需求,一般有些文本框输入都会有input自动完成事件,方便用户输入时可以模糊查询里面的内容,比如说要查一个输入某种药品时然后在文本框下会显示出相应药品,下面是一个MVC中input自动完成事件的简单实例
1、 第一步在HTML中写一个标签(文本域)和
标签(装模糊查询的结果;
给input添加一个文本自动完成事件“oninput”,并先让ul标签隐藏起来先
代码如图:
<div class="area" id="area">
<input id="AutoComplete" type="text" "Auto()" />
<ul id="Content" class="hidden" style="margin:0; padding:0; display:none;">
</ul>
</div>
2、 第二部写控制器代码,比如说我们现在要做一个学生姓名input自动完成事件,那么我们就要在控制器写查询学生姓名的代码,从数据库获取数据返回控制器,最后以Json格式给页面层获取,代码如图;
public ActionResult selectName2(string name)
{
var list = (from tb in myModels.Test
where tb.Name.Contains(name)
select new
{
tb.Name,
tb.ID
}).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
3、 最后就是写JavaScript的代码了,先获取文本框的值,通过getJson请求服务器返回数据,最后把数据添加到ul标签里,代码和解释如下:
结果如下:
function Auto() {
var values = $("#AutoComplete").val(); //获取文本框的值
if (values == "" || values == null) {//本框的值为空则隐藏ul
$("#Content").attr("style", "display:none; margin:0; padding:0;"); //
} else {//本框的值不为空则隐藏显示ul
$("#Content").attr("style", "display:block; margin:0; padding:0;");
$.getJSON("/input自动完成/selectName2?name=" + values, function (datas) { //通过GETJSON向控制器获取代码
if (datas.length > 0) { //判断服务器是否返回数据
$("#Content").children().remove();//添加li前先清空上一次的结果
$.each(datas, function (i) {
$("#Content").append("<li 'checkthis(this)'>" + datas[i].Name + "</li>");//把返回的结果以li标签显示在页面
})
} else {//不返回数据就隐藏ul
$("#Content").children().remove();
}
})
}
}
这种写法是纯在很多不足的,它请求服务器频繁,对数据大的操作影响效率;
附:老师的正确代码:
主要还是JavaScript的代码不同,它只需要请求一次服务器就可以了,更有效的提高了代码效率,老师这里的HTML代码直接就一个input标签就可以了;
<div>
<input id="autocomplete" value="" title="type "a"">
</div>
JavaScript代码:
$(function () {
$.post("/input自动完成/selectName", function (data) { //通过post提交获取控制器的返回的数据
var availableTags; //声明一个变量接收控制器返回的值
availableTags = new Array(data.length); //将控制器返回的json数据转换成数组类型
for (var i = 0; i < data.length; i++) {
availableTags[i] = data[i].Name.trim(); //循环遍历每一个数组
};
console.log(availableTags);
$("#autocomplete").autocomplete({ //文本域自动完成事件
source: availableTags,//source 属性用于返回模式匹配所用的文本。
select: function (event, item) {
for (var i in item) {
console.log(item[i].value);
}
}
});
});
});
通过在js写一个autocomplete 文本自动完成事件,再通过source 属性用于返回模式匹配所用的文本,select事件获取选中的文本;不同的代码可以有相同的效果,但是我们要的是能最好最有效表达的方法。