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

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

先来一张效果展示图：

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script src="jquery-1.7.2.min.js"></script>

     <title></title>  

     <style type="text/css">

         #div_main {

             margin:  auto;

             width: 300px;

             height: 400px;

             border: 1px solid black;

             margin-top: 50px;

         }  

         #div_txt {

             position: relative;

             width: 200px;

             margin:  auto;

             margin-top: 40px;

         }  

         #txt1 {

             width: %;

         }  

         #div_items {

             position: relative;

             width: %;

             height: 200px;

             border: 1px solid #66afe9;

             border-top: 0px;

             overflow: auto;

             display: none;

         }  

         .div_item {

             width: %;

             height: 20px;

             margin-top: 1px;

             font-size: 13px;

             line-height: 20px;

         }

     </style>

 </head>

 <body>

     <div id="div_main">

         <!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->

         <form autocomplete="off">

             <div id="div_txt">

                 <!--要模糊匹配的文本框-->

                 <input type="text" id="txt1" />  

                 <!--模糊匹配窗口-->

                 <div id="div_items">

                     <div class="div_item">周杰伦</div>

                     <div class="div_item">周杰</div>

                     <div class="div_item">林俊杰</div>

                     <div class="div_item">林宥嘉</div>

                     <div class="div_item">林妙可</div>

                     <div class="div_item">唐嫣</div>

                     <div class="div_item">唐家三少</div>

                     <div class="div_item">唐朝盛世</div>

                     <div class="div_item">奥迪A4L</div>

                     <div class="div_item">奥迪A6L</div>

                     <div class="div_item">奥迪A8L</div>

                     <div class="div_item">奥迪R8</div>

                     <div class="div_item">宝马GT</div>

                 </div>

             </div>

         </form>

     </div>

 </body>

 </html>

 <script type="text/javascript">  

     //弹出列表框

     $("#txt1").click(function () {

         $("#div_items").css('display', 'block');

         return false;

     });  

     //隐藏列表框

     $("body").click(function () {

         $("#div_items").css('display', 'none');

     });  

     //移入移出效果

     $(".div_item").hover(function () {

         $(this).css('background-color', '#1C86EE').css('color', 'white');

     }, function () {

         $(this).css('background-color', 'white').css('color', 'black');

     });  

     //文本框输入

     $("#txt1").keyup(function () {

         $("#div_items").css('display', 'block');//只要输入就显示列表框  

         if ($("#txt1").val().length <= ) {

             $(".div_item").css('display', 'block');//如果什么都没填，跳出，保持全部显示状态

             return;

         }  

         $(".div_item").css('display', 'none');//如果填了，先将所有的选项隐藏  

         for (var i = ; i < $(".div_item").length; i++) {

             //模糊匹配，将所有匹配项显示

             if ($(".div_item").eq(i).text().substr(, $("#txt1").val().length) == $("#txt1").val()) {

                 $(".div_item").eq(i).css('display', 'block');

             }

         }

     });  

     //项点击

     $(".div_item").click(function () {

         $("#txt1").val($(this).text());

     });  

 </script>

二、

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script src="jquery-1.7.2.min.js"></script>

     <style type="text/css">

         #txt {

             width: 200px;

             height: 20px;

         }

         .sp1:hover {

         background-color:blue;

         }

     </style>

 </head>

 <body>

     <form id="form1" runat="server">

         <div style="width: 205px; height:26px;" id="div1">

             <input type="text" id="txt" /><br />

             <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;">

                 <asp:Repeater ID="Repeater1" runat="server">

                     <ItemTemplate>

                         <div style="width:200px;" class="sp1" onmouseover="click1(this);"><%#Eval("AreaName") %></div>

                     </ItemTemplate>

                 </asp:Repeater>

             </div>

         </div>

     </form>

 </body>

 </html>

 <script type="text/javascript">

     document.getElementById("txt").onfocus = function () {

         document.getElementById("div2").style.display = "block";

     }

     document.getElementById("txt").onblur = function () {

         document.getElementById("div2").style.display = "none";

     }

     document.getElementById("txt").onkeyup = function () {

         var txt = document.getElementById("txt").value;

         document.getElementById("div2").innerHTML = "";

         $.ajax({

             url: "ajax/Handler.ashx",

             data: {"txt":txt},

             type: "post",

             dataType: "json",

             success: function (data) {

                 for (i in data) {

                     var end = "";

                     end += "<div style='width:200px;' class='sp1' onmouseover='click1(this);' >" + data[i].name + "</div>";

                     document.getElementById("div2").innerHTML += end;

                 }

             }

         });

     }

     function click1(aaa) {

         document.getElementById("txt").value = aaa.innerHTML;

     }

 </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();

        }

    }

}

巴特西

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

最新文章

热门文章