输入框的模糊搜索

最新推荐文章于 2025-05-14 22:27:35 发布

长路漫漫兮，吾修远道

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量1.1k

点赞数

文章标签： MVC 查询

本文链接：https://blog.youkuaiyun.com/weixin_44550157/article/details/96337741

版权

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年7月16日

我一开始做项目时，发现有些输入框，需要输入的数据比较多。比如：药品编号每次查找时，因为太长，一般记不住，又怕写错。所以要翻找信息，显得特别麻烦。所以我把输入框改成下拉框，用下拉框刚开始时，还没什么问题，可是用着用着数据慢慢变多了。下拉框从十多条变成一百多条。所以我想把输入框和下拉框结合。就是我今天要讲的功能：输入框模糊搜索。
在这里插入图片描述
技术点：在输入框中的值时，输入框下面会出现，带有从数据库查找的数据，并与输入框相同的值。

第二点：功能点的代码流程：

第一步：写一些基本的HTML

Input标签是输入框，datalist标签就是输入框会筛选的值，但如果不点击输入框的话，是不会显示的。Input是通过“list”和连接datalist的id。
介绍一下：ASP.NET的DataList 控件。DataList 控件是用于显示限制于该控件的项目的重复列表。就是说在input标签中输入值，会显示出option 标签的value相似的值。
第二步：option的绑定。

虽说DataList 控件可以查找与输入框相似值，但是这种值是固定，这不是我们想要的结果。所以我封装的上面方法，用于查询数据库的值，添加option标签。方法中第一个参数是datalist的id ,第二个参数是请求服务器的路径，注意请求返回的回调函数。要包括id字段和text字段。将回调函数中的id赋值给option 标签的id，将回调函数中的text赋值给option 标签的value。
这就OK了。

其实这种，在input标签中输入值，会显示出option 标签的value相似的值的方法。体验不是很好，用起来像是浏览器提示的历史记录。尤其是刚开始什么都没输入时。会显现所有的信息，看起来很多，并更像是什么都没做。

$("#UrlDrugName").change(function () {
          var UrlDrugName = $("#UrlDrugName").val();
          if (UrlDrugName == "" || UrlDrugName == null) {
                   return;
          }
           createdatalist("UrlDrugName", "dataDrugName");
})

为了更好的显示这个“输入框模糊搜索”的效果。所以为把绑定option的步骤放在输入框的改变事件里面。获取到输入框的value值后，判断是否为空。
如果就直接返回就行。

当然我这个“输入框模糊搜索”不能像浏览器一样超大规模查询。
不过因为操作简单，代码少。所以在一般的输入框是挺实用的。