考试系统——可输入并自动匹配的下拉框（一）——实现可输入并自动匹配

最新推荐文章于 2022-04-18 14:23:54 发布

_Emily

最新推荐文章于 2022-04-18 14:23:54 发布

阅读量9.3k

点赞数 5

分类专栏：考试系统

本文链接：https://blog.csdn.net/liutengteng130/article/details/16042661

版权

考试系统专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自动匹配，像我们平时用的百度，谷歌，如果输入某个字下面会自动匹配出很多内容来，让我们用起来很方便。

我们平时做项目，下拉框用DropDownList很方便，绑定数据库即可把数据显示在下拉框中，方便快捷，但是为了更好的用户体验度，如果下拉框的内容很多的时候，下拉找相应内容都看花眼了，很浪费时间。这时就需要用到自动匹配，只要输入相应关键字就可以查找出一系列的内容。

需要实现的需求是：把查询的内容放在下拉框里面，去下拉框里面匹配，这样只需要绑定一次数据库就可以了。如果是自动匹配数据库中的那么每一次输入都要去数据库中查询。

因为一开始先用的DropDownList控件，后来为了能输入并且自动匹配加了一个TextBox控件，实现了。但是遇到一个问题，能匹配出来，但是存在DropDownList的下拉框中，不点击DropDownList不能看到匹配的结果，问师哥调试了好长时间还是不行，于是换了另一种方法。(Jquery EasyUI)

代码实现很简单：

   <head>
                            <link rel="stylesheet" type="text/css"  href="../../downlist/easyui.css"/>
                             <link rel="stylesheet" type="text/css" href="../../downlist/icon.css"/>
                            <link rel="stylesheet" type="text/css" href="../../downlist/demo.css"/>
                            <script type="text/javascript" src="../../downlist/jquery.min.js"></script>
                          <script type="text/javascript" src="../../downlist/jquery.easyui.min.js"></script>

                  </head>
                  
               控件：
                                  <td class="auto-style1">
                                        学院：</td>
                                    <td class="auto-style2">
                                             <select id="College"  class="easyui-combobox" name="state" runat="server" οnchange="JudgeUserName()" style="width: 172px; height:25px;" panelheight="auto">
                                         <option value="0">请选择学院</option>  
                                        </select>
                                     </td>

很简单，其实Jquery UI就是封装好了的方法可以直接拿过来用特别方便，界面美观。

效果：

JqueryUI：

JqueryUI是以JQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的Web应用程序。

Jquery UI是在JQuery基础上，利用JQuery的扩展属性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。它其实就是JQuery插件。

通过应用Jquery UI的控件，发现应用这些封装好的框架很方便。站在巨人的肩膀上。

期待下篇博客。不断的探索和实践学习中……

_Emily

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
47
评论
考试系统——可输入并自动匹配的下拉框（一）——实现可输入并自动匹配

自动匹配，像我们平时用的百度，谷歌，如果输入某个字下面会自动匹配出很多内容来，让我们用起来很方便。我们平时做项目，下拉框用DropDownList很方便，绑定数据库即可把数据显示在下拉框中，方便快捷，但是为了更好的用户体验度，如果下拉框的内容很多的时候，下拉找相应内容都看花眼了，很浪费时间。这时就需要用到自动匹配，只要输入相应关键字就可以查找出一系列的内容。
复制链接

扫一扫