一、项目中需要用到此功能，使用过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. NodeJS学习笔记四

    Generator简介 基本概念 Generator函数有多种理解角度.从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态. 执行Generator函数会返回一个遍历 ...

  2. 史上最强网推案例，没有之一【ZW团队实战经典】

    ZW团队认为,互联网本质只有两个字:颠覆. ZW网络推广团队,是国内首个教父级网络营销团队,自1997年以来,先后参与操盘多个重大互联网项目,服务过超过150家国际500强客户,是微软公司首家官方认证 ...

  3. Redis 资料整理

    Redis is an open source, BSD licensed, advanced key-value store. Redis is often referred to as a dat ...

  4. 20145307陈俊达《网络对抗》逆向及Bof基础

    20145307陈俊达<网络对抗>逆向及Bof基础 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任 ...

  5. CodeForces 450B Jzzhu and Sequences（矩阵快速幂）题解

    思路: 之前那篇完全没想清楚,给删了,下午一上班突然想明白了. 讲一下这道题的大概思路,应该就明白矩阵快速幂是怎么回事了. 我们首先可以推导出 学过矩阵的都应该看得懂,我们把它简写成T*A(n-1)= ...

  6. 【Rest】在Dubbo中开发REST风格的远程调用（RESTful Remoting）

    目录 概述 REST的优点 应用场景 快速入门 标准Java REST API:JAX-RS简介 REST服务提供端详解 HTTP POST/GET的实现 Annotation放在接口类还是实现类 J ...

  7. 使用Python登陆QQ邮箱发送垃圾邮件 简单实现

    参考:Python爱好者 知乎文章 需要做的是: 1.邮箱开启SMTP功能 2.获取授权码 上述两步百度都有. 源码: #!/usr/bin/env python from email.mime.te ...

  8. 2017NOIP模拟赛-科普基地

    今天回来打的第一场NOIP难度的试题,结果惨不忍睹.写一下每道题的做法,然后每道题犯的__弱智__错误 UPD:2018.9.15 突然这篇题解就变成很多大佬要看的了,因为之前是写给自己看的,所以写的 ...

  9. POJ 1860 Currency Exchange（Bellman-Ford）

    https://vjudge.net/problem/POJ-1860 题意: 有多种货币,可以交换,有汇率并且需要支付手续费,判断是否能通过不断交换使本金变多. 思路: Bellman-Ford算法 ...

  10. BZOJ 3676 【APIO2014】 回文串

    题目链接:回文串 我终于也会回文自动机辣! 其实吗……我觉得回文自动机(听说这玩意儿叫\(PAM\))还是比较\(simple\)的……至少比\(SAM\)友善多了…… 所谓回文自动机,每个节点就代表 ...