文本框模糊匹配（纯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 ...
随机推荐
- placement new--《C++必知必会》 条款35
placement new是重载operator new的一个标准.全局的版本,它不能被自定义的版本代替(不像普通的operator new和operator delete能够被替换成用户自定义的版本 ...
- hdu5102 枚举每条边的长度
题意 给了 一颗 有 100000 个节点的树, 他们构成的边有 n*(n-1)/2 种. 每条边有一个长度,长度排序后 取前K条的 和, 枚举每条长度为1 的边 放进队列,然后通过成都为1 的表去 ...
- centos6 pip install python-ldap报错
error: Setup script exited with error: command 'gcc' failed with exit status 1 解决方法: 原因是版本不兼容,centos ...
- FMS4
先要打开服务器你在本机装的fms,本机就是服务器了!记得现在你的机器既是客户端又是服务端开始===程序===Macromedia===Flash Media Server 2有两个start****, ...
- centos7下SVN服务器如何搭建
Centos7 搭建svn服务器 linux(centos)下SVN服务器如何搭建?说到SVN服务器,想必大家都知道,可以是在LINUX下如何搭建SVN服务器呢?那么今天给大家分享一下linux(ce ...
- 第四章 consul cluster
1.vagrant 为了模拟集群效果,使用vagrant. 1.1.首先下载vagrant https://www.vagrantup.com/downloads.html 说明:浏览器下载可能比较慢 ...
- BZOJ 3064 CPU监控
题目链接:CPU监控 学习一番线段树的历史标记- 这道题就是区间加法,区间赋值,要询问区间最大值 和 区间历史最大值的最大值. 然后这种题就是在现有标记的基础上多弄一套标记,维护这个点出现过的最大的标 ...
- php 二维数组
<?php // 一个二维数组 $cars=array ( array(,), array(,), array(,) ); ?>
- [原][译][osgearth]API加载地球（OE官方文档翻译）
原文参考:http://docs.osgearth.org/en/latest/developer/maps.html#programmatic-map-creation 本人翻译水平有限... 加载 ...
- JSP 日期处理
JSP 日期处理 使用JSP最重要的优势之一,就是可以使用所有Java API.本章将会详细地讲述Java中的Date类,它在java.util包下,封装了当前日期和时间. Date类有两个构造函数. ...