文本框模糊匹配（纯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 ...
随机推荐
- linux系统进入单用户模式
进入单用户模式可进行root账户和其他普通账户的密码的修改 1)Ubuntu 开机到grub时(在开机时长按shift键),用上下键移到第二行的恢复模式(recovery mode),按e(注意不是回 ...
- Could not load file or assembly 'Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, ...
使用oracle数据库一个多月依赖这问题一直都得不到解决,最近任务不是很忙了,所以决定把这问题解决掉.写一篇文章做记录. 以上错误主要是net程序oracle数据库使用了Microsoft Enter ...
- DNS服务器配置实践
实验背景:在Linux系统上配置主要DNS服务器和辅助DNS服务器,所在域名为example.com,子网为192.168.X.0. 启动已安装LINUX系统,进行DNS服务器配置. 一.配置主要DN ...
- Codeforces Round #534 (Div. 2) Solution
A. Splitting into digits Solved. #include <bits/stdc++.h> using namespace std; int n; void sol ...
- 解决[Xcodeproj] Unknown object version错误
错误描述: RuntimeError - [Xcodeproj] Unknown object version. /Library/Ruby/Gems/2.0.0/gems/xcodeproj-0.2 ...
- DB开发之大数据量高并发的数据库优化
一.数据库结构的设计 如果不能设计一个合理的数据库模型,不仅会增加客户端和服务器段程序的编程和维护的难度,而且将会影响系统实际运行的性能.所以,在一个系统开始实施之前,完备的数据库模型的设计是必须的. ...
- 大数据领域两大最主流集群管理工具Ambari和Cloudera Manger
不多说,直接上干货! 目前啊,都知道,大数据集群管理方式分为手工方式(Apache hadoop)和工具方式(Ambari + hdp 和Cloudera Manger + CDH). 手工部署呢, ...
- php+mysql事务处理例子详细分析实例
一.数据引擎innodb用begin,rollback,commit来实现提交事务处理,begin开始事务后出现错误就rollback事务回滚或者没有错误就commit提事务提交确认完成. start ...
- Tomcat 启动图解
Tomcat server.xml结构 startup.bat执行流程 catalina.bat执行流程 Tomcat Server处理一个http请求的过程
- System.DateTimeKind 的用法
最近在使用SQLite的数据库,发现SQLiteConnection类,有一个属性DateTimeKind 去msdn上找了下资料,http://msdn.microsoft.com/en-us/li ...