输入框的模糊查询

输入框的模糊查询

开发工具与关键技术：VisualStudio C#
作者：子易
撰写时间：2019/06/17

效果图：

功能点：
当输入内容时，input标签会根据输入的内容对绑定在输入框的数据进行匹配，并且显示出匹配的结果，从而实现一个模糊查询的功能。

HTML部分：

<div style="margin-top:30px">
            <div>带搜索的输入框</div>
            <input list="clothing" id="select" />
            <datalist id="clothing"></datalist>
</div>

这个功能的实现主要依靠dalist标签。具体的操作就是，dalist标签与数据库查询出来的数据进行绑定，然后再根据input标签输入的内容将符合的数据单独显示出来，所以input标签其实算是一个打酱油的存在。input标签里有一个list的属性专门用来和dalist标签进行绑定，当dalist标签的id与input标签的list名相同时这两个标签就绑定成功了。
下面是一些分装好的代码，可用于下拉框与datelist等标签的数据绑定，appendOption2方法的第一个参数是要绑定标签的id，第二个参数是要绑定数据的路径，这样九实现了datalist
标签数据的动态生成。

appendOption2("clothing", "/Default/inputSelect");
        function appendOption2(id, url) {
            $.getJSON(url, function (data) {
                $("#" + id).empty();
                $.each(data, function (i) {
$("#" + id).append("<option value=" + data[i].text + " id=" + data[i].id + ">" + data[i].text + "</option>");
                });
            });
        }

控制器方法：
控制器的方法就是一个简单的单标查询，查询出的数据用于页面appendOption2方法的数据绑定。

public ActionResult inputSelect()
        {
            var list = (from tb in myModel.PW_Detail
                        select new {
                            id = tb.CostumetypeID,
                            text=tb.Name,
                        }).ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }