文本框模糊匹配（純html+jquery簡單實現）

本文轉載自查看原文 2017-01-17 10:50 2133

一、項目中需要用到此功能，使用過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" onmouseover="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' onmouseover='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();
        }
    }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery文本框水印插件的簡單實現 Jquery實現文本框輸入提示 jquery實現文本框click清空文本內容 jquery聚焦文本框用jQuery實現限制輸入字數的文本框 winform文本框怎么實現html的placeholder效果 jQuery判斷文本框是否為空 html之長文本框置頂 HTML中的文本框textarea標簽 html之給文本框設置寬度和高度...