文本框模糊匹配（纯html+jquery简单实现）

最新推荐文章于 2024-06-24 13:50:58 发布

weixin_33883178

最新推荐文章于 2024-06-24 13:50:58 发布

阅读量273

点赞数

文章标签： ui xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/maxin991025-/p/6292100.html

版权

一、项目中需要用到此功能，使用过EasyUI中的Combobox，网上也搜过相应的解决办法，对于我的项目来说都不太合适，因为我还是喜欢比较纯粹的东西，就自己动手写了一个，比较简单，但还算能用，我的项目中也已经使用上了，做了个小demo作为记录，有需要的自己复制代码改一改就好了。(向立凯)

先来一张效果展示图：

接下来是代码，纯html+css+jQuery的，建个新页面复制进去即可，复制代码注意自己重新导入一个jquery(文本框模糊匹配)

  1 <!DOCTYPE html>  
  2 <html xmlns="http://www.w3.org/1999/xhtml">  
  3 <head>  
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5     <script src="jquery-1.7.2.min.js"></script>  
  6     <title></title>  
  7   
  8     <style type="text/css">  
  9         #div_main {  
 10             margin: 0 auto;  
 11             width: 300px;  
 12             height: 400px;  
 13             border: 1px solid black;  
 14             margin-top: 50px;  
 15         }  
 16   
 17         #div_txt {  
 18             position: relative;  
 19             width: 200px;  
 20             margin: 0 auto;  
 21             margin-top: 40px;  
 22         }  
 23   
 24         #txt1 {  
 25             width: 99%;  
 26         }  
 27   
 28         #div_items {  
 29             position: relative;  
 30             width: 100%;  
 31             height: 200px;  
 32             border: 1px solid #66afe9;  
 33             border-top: 0px;  
 34             overflow: auto;  
 35             display: none;  
 36         }  
 37   
 38         .div_item {  
 39             width: 100%;  
 40             height: 20px;  
 41             margin-top: 1px;  
 42             font-size: 13px;  
 43             line-height: 20px;  
 44         }  
 45     </style>  
 46 </head>  
 47 <body>  
 48     <div id="div_main">  
 49         <!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->  
 50         <form autocomplete="off">  
 51             <div id="div_txt">  
 52                 <!--要模糊匹配的文本框-->  
 53                 <input type="text" id="txt1" />  
 54   
 55                 <!--模糊匹配窗口-->  
 56                 <div id="div_items">  
 57                     <div class="div_item">周杰伦</div>  
 58                     <div class="div_item">周杰</div>  
 59                     <div class="div_item">林俊杰</div>  
 60                     <div class="div_item">林宥嘉</div>  
 61                     <div class="div_item">林妙可</div>  
 62                     <div class="div_item">唐嫣</div>  
 63                     <div class="div_item">唐家三少</div>  
 64                     <div class="div_item">唐朝盛世</div>  
 65                     <div class="div_item">奥迪A4L</div>  
 66                     <div class="div_item">奥迪A6L</div>  
 67                     <div class="div_item">奥迪A8L</div>  
 68                     <div class="div_item">奥迪R8</div>  
 69                     <div class="div_item">宝马GT</div>  
 70                 </div>  
 71             </div>  
 72         </form>  
 73     </div>  
 74 </body>  
 75 </html>  
 76 <script type="text/javascript">  
 77   
 78     //弹出列表框  
 79     $("#txt1").click(function () {  
 80         $("#div_items").css('display', 'block');  
 81         return false;  
 82     });  
 83   
 84     //隐藏列表框  
 85     $("body").click(function () {  
 86         $("#div_items").css('display', 'none');  
 87     });  
 88   
 89     //移入移出效果  
 90     $(".div_item").hover(function () {  
 91         $(this).css('background-color', '#1C86EE').css('color', 'white');  
 92     }, function () {  
 93         $(this).css('background-color', 'white').css('color', 'black');  
 94     });  
 95   
 96     //文本框输入  
 97     $("#txt1").keyup(function () {  
 98         $("#div_items").css('display', 'block');//只要输入就显示列表框  
 99   
100         if ($("#txt1").val().length <= 0) {  
101             $(".div_item").css('display', 'block');//如果什么都没填，跳出，保持全部显示状态  
102             return;  
103         }  
104   
105         $(".div_item").css('display', 'none');//如果填了，先将所有的选项隐藏  
106   
107         for (var i = 0; i < $(".div_item").length; i++) {  
108             //模糊匹配，将所有匹配项显示  
109             if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) {  
110                 $(".div_item").eq(i).css('display', 'block');  
111             }  
112         }  
113     });  
114   
115     //项点击  
116     $(".div_item").click(function () {  
117         $("#txt1").val($(this).text());  
118     });  
119   
120 </script>

二、

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <script src="jquery-1.7.2.min.js"></script>
10     <style type="text/css">
11         #txt {
12             width: 200px;
13             height: 20px;
14             
15         }
16         .sp1:hover {
17         background-color:blue;
18         }
19     </style>
20 </head>
21 <body>
22     <form id="form1" runat="server">
23         <div style="width: 205px; height:26px;" id="div1">
24             <input type="text" id="txt" /><br />
25             <div id="div2" style="width: 200px;display:none; max-height: 200px;overflow-y:auto;overflow-x:hidden; border-bottom: 1px solid #808080;border-left: 1px solid #808080;border-right: 1px solid #808080;">
26                 <asp:Repeater ID="Repeater1" runat="server">
27                     <ItemTemplate>
28                         <div style="width:200px;" class="sp1" οnmοuseοver="click1(this);"><%#Eval("AreaName") %></div>
29                     </ItemTemplate>
30                 </asp:Repeater>
31             </div>
32         </div>
33     </form>
34 </body>
35 </html>
36 <script type="text/javascript">
37     document.getElementById("txt").onfocus = function () {
38         document.getElementById("div2").style.display = "block";
39     }
40     document.getElementById("txt").onblur = function () {
41         document.getElementById("div2").style.display = "none";
42     }
43 
44     document.getElementById("txt").onkeyup = function () {
45         var txt = document.getElementById("txt").value;
46 
47         document.getElementById("div2").innerHTML = "";
48         $.ajax({
49             url: "ajax/Handler.ashx",
50             data: {"txt":txt},
51             type: "post",
52             dataType: "json",
53             success: function (data) {
54                 
55                 for (i in data) {
56                     var end = "";
57                     end += "<div style='width:200px;' class='sp1' οnmοuseοver='click1(this);' >" + data[i].name + "</div>";
58 
59                     document.getElementById("div2").innerHTML += end;
60                 }
61 
62 
63             }
64 
65         });
66 
67     }
68 
69     
70     function click1(aaa) {
71         
72         document.getElementById("txt").value = aaa.innerHTML;
73         
74     }
75 </script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = new ChinaData().select();
            Repeater1.DataBind();
        }
    }
}

转载于:https://www.cnblogs.com/maxin991025-/p/6292100.html

weixin_33883178

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框模糊匹配（纯html+jquery简单实现）

一、项目中需要用到此功能，使用过EasyUI中的Combobox，网上也搜过相应的解决办法，对于我的项目来说都不太合适，因为我还是喜欢比较纯粹的东西，就自己动手写了一个，比较简单，但还算能用，我的项目中也已经使用上了，做了个小demo作为记录，有需要的自己复制代码改一改就好了。(向立凯)先来一张效果展示图：接下来是代码，纯html+css+jQuery的，建个新页面复制进去即可，复制代...
复制链接

扫一扫