一、项目中需要用到此功能，使用过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简单实现）的更多相关文章

  1. 通过匹配绑定select option的文本值 模糊匹配

    //通过匹配绑定select option的文本值 模糊匹配 $(".class option:contains('文本值')").attr("selected" ...

  2. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

  3. input即时————模糊匹配（纯html+jquery简单实现）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 文本框监听事件blur()的简单使用

    场景描述:在做编辑功能的时候,经常要判断编码,或者密码之类的是否已经被使用,以前自己做的时候,经常都是在提交了之后才判断的,到现在,才发现,这样做的用户体验不好,完美一点的做法就是当此文本框失去焦点的 ...

  5. 文本框 textarea 动态显示行数（简单文本编辑器）

    工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. <style type="text/css"> ...

  6. Android -- 自动完成文本框(可以匹配多个值，并以，结尾)

    1. 

  7. jQuery 使得文本框获得焦点

      今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...

  8. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

  9. jQuery 文本框得失焦点应用

    一.文本框得失焦点一种是改变文本框的样式    得到焦点:               失去焦点: 二.文本框得失焦点另一种是改变文本框的值    得到焦点:     失去焦点:       三.jQ ...

随机推荐

  1. tornado 入门

    Overview FriendFeed是一款使用 Python 编写的,相对简单的 非阻塞式 Web 服务器.其应用程序使用的 Web 框架看起来有些像 web.py 或者 Google 的 weba ...

  2. C# 使用 wkhtmltopdf 把HTML文本或文件转换为PDF

    一.简介 之前也记录过一篇关于把 HTML 文本或 HTML 文件转换为 PDF 的博客,只是之前那种方法有些局限性. 后来又了解到 wkhtmltopdf.exe 这个工具,这个工具比起之前的那种方 ...

  3. (转)如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据？firefox（火狐）

    如何让ActiveXObject( "Microsoft.XmlDom ")对象在非IE浏览器下显示数据?firefox(火狐) 2013-09-10 16:01 2152人阅读 ...

  4. SQL group by的使用

    ①定义 "group by" 从字面上理解是根据“by"指定的规则对数据进行分组 ②简单示例 ③group by 中的select字段是受限制的 select指定的字段要 ...

  5. #include <ntifs.h>出现PEPROCESS redefinition问题处理

    转载:http://blog.csdn.net/ytfrdfiw/article/details/23334297 如果在自己的程序中,即包含ntddk.h和ntifs.h的时候,编译的时候会出现如下 ...

  6. Tensorflow源码编译，解决tf提示未使用SSE4.1 SSE4.2 AVX警告【转】

    本文转载自:https://blog.csdn.net/iTaacy/article/details/72799833 版权声明:欢迎转载,转载请注明出处! https://blog.csdn.net ...

  7. SPOJ BALNUM Balanced Numbers（数位DP+状态压缩）题解

    思路: 把0~9的状态用3进制表示,数据量3^10 代码: #include<cstdio> #include<map> #include<set> #includ ...

  8. 51Nod 1503 猪和回文

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1503 思路: 没想到要用DP去解决. 题目是从起点出发走,我们可以从起点 ...

  9. Notepad++ 管理工程--转载

    http://blog.csdn.net/cashey1991/article/details/7001385 @1.首先从下面这个菜单打开工程panel @2.在工程panel的“Workspace ...

  10. Uva 12304 - 2D Geometry 110 in 1!

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...