Input自动完成事件

文献种类：专题技术文献
开发工具与关键技术：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 &quot;a&quot;">  
</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事件获取选中的文本；不同的代码可以有相同的效果，但是我们要的是能最好最有效表达的方法。