文本框模糊匹配（纯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简单实现）的更多相关文章
- 通过匹配绑定select option的文本值 模糊匹配
//通过匹配绑定select option的文本值 模糊匹配 $(".class option:contains('文本值')").attr("selected" ...
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...
- input即时————模糊匹配（纯html+jquery简单实现）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 文本框监听事件blur()的简单使用
场景描述:在做编辑功能的时候,经常要判断编码,或者密码之类的是否已经被使用,以前自己做的时候,经常都是在提交了之后才判断的,到现在,才发现,这样做的用户体验不好,完美一点的做法就是当此文本框失去焦点的 ...
- 文本框 textarea 动态显示行数（简单文本编辑器）
工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. <style type="text/css"> ...
- Android -- 自动完成文本框(可以匹配多个值，并以，结尾)
1.
- jQuery 使得文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...
- jQuery 文本框得失焦点应用
一.文本框得失焦点一种是改变文本框的样式 得到焦点: 失去焦点: 二.文本框得失焦点另一种是改变文本框的值 得到焦点: 失去焦点: 三.jQ ...
随机推荐
- Status Code状态码详解对照表
状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在 ...
- 2017-2018-1 JaWorld 第三周作业
2017-2018-1 JaWorld 第三周作业 团队展示 队员学号 队名 团队项目描述 队员风采 团队的特色 团队合照 团队初步合作 前两周的反思与总结 需要改进的地方 团队选题 *采访老师或有开 ...
- 使用ShellExecute打开目标文件所在文件夹并选中目标文件
转载:http://blog.csdn.net/chenlycly/article/details/7366364 转载:http://bbs.csdn.net/topics/50440550 She ...
- 【转】Linux系统平均负载3个数字的含义
文章作者:姜南(Slyar) 文章来源:Slyar Home (www.slyar.com) 转载请注明,谢谢合作. 越来越多人开始接触Linux操作系统,从VPS到无线路由的刷机系统(如OpenWR ...
- HDU 2732 Leapin' Lizards（最大流）
http://acm.hdu.edu.cn/showproblem.php?pid=2732 题意: 给出n行的网格,还有若干只蜥蜴,每只蜥蜴一开始就在一个格子之中,并且给出蜥蜴每次的最大跳跃长度d. ...
- Eclipse插件Fat Jar
1.安装 1)Eclipse在线更新方法 Help > Install New Software > Add, name:Fat Jar location:http://kurucz-gr ...
- js urlencode
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Intel Omin-Path Architecture 搭建调优与测试
OPA在Centos上的搭建 1. 首先确认Omni-Path Host Fabric Interfaces (HFIs) # yum install –y pciutils # lspci -vv ...
- Java IO流-NIO简介
2017-11-05 22:09:04 NIO NIO:new IO就是新IO的意思,JDK4开始出现新IO,新IO和传统的IO有相同的目的,都是用于进行输入输出的,但是新IO使用了不同的方式来处理输 ...
- window下rabbitmq环境安装
最近项目想用个MQ来做业务分离,看了市面上众多产品,最后选了rabbitmq,理由很简单,对window的支持很到位(其实是公司的系列产品都是.net的). 安装方法什么的就不说了,直接到官网下载双击 ...