zoukankan      html  css  js  c++  java
  • [原]考试系统——可输入并自动匹配的下拉框(一)——实现可输入并自动匹配

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

     

             我们平时做项目,下拉框用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" onchange="JudgeUserName()" style=" 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的控件,发现应用这些封装好的框架很方便。站在巨人的肩膀上。


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



  • 相关阅读:
    HearthBuddy投降插件2019-11-01的使用
    正则表达式在线分析 regex online analyzer
    Tips to write better Conditionals in JavaScript
    The fileSyncDll.ps1 is not digitally signed. You cannot run this script on the current system.
    Cannot capture jmeter traffic in fiddler
    JMETER + POST + anti-forgery token
    input type color
    HearthBuddy修改系统时间
    What are all the possible values for HTTP “Content-Type” header?
    UDK性能优化
  • 原文地址:https://www.cnblogs.com/java20131201/p/3466222.html
Copyright © 2011-2022 走看看