文本框模糊匹配（纯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 ...
随机推荐
- 使用老毛桃安装Windows操作系统
首先必须知道什么是PE系统? 当电脑出现问题而不能正常进入系统时候的一种“紧急备用”系统,通常放在U盘中,设置启动项优先级,使得电脑启动的时候加载PE系统. 如何在U盘中安装老毛桃(PE工具箱)? h ...
- Codeforces Round #413, rated, Div. 1 + Div. 2 C. Fountains（贪心 or 树状数组）
http://codeforces.com/contest/799/problem/C 题意: 有n做花园,有人有c个硬币,d个钻石 (2 ≤ n ≤ 100 000, 0 ≤ c, d ≤ 100 ...
- JavaScript获取输入框内容
html: <input name="money" type="number" placeholder="税前工资"><b ...
- c++ 计算指定半径圆的面积
#include <iostream> #define PI 3.14 using namespace std; class Circle { float radius; public: ...
- Spark读取结构化数据
读取结构化数据 Spark可以从本地CSV,HDFS以及Hive读取结构化数据,直接解析为DataFrame,进行后续分析. 读取本地CSV 需要指定一些选项,比如留header,比如指定delimi ...
- js 面试题总结
面试题解析 window.number = 1; var obj = { number: 4, dbl: (function(){ console.log(obj.number); this.numb ...
- windows java 环境变量配置
第一步 找到系统设置环境变量的位置(windows 10): 控制面板\系统和安全\系统 点击 ‘高级系统设置’ 就可以看到 “环境变量” 了 第二步 设置3个路径 1.path (配置JD ...
- Kolakoski数列
2018-04-16 15:40:16 Kolakoski序列是一个仅由1和2组成的无限数列,是一种通过“自描述”来定义的数列.他在整数数列大全网站上排名第二位,足见该数列在组合数学界中的重要性. K ...
- selenium 3.6.0 geckodriver的一次坑
Traceback (most recent call last): File "./se3.py", line 16, in <module> dr=webd ...
- [POI2012]ROZ-Fibonacci Representation (数学)
大意:给定n, 求至少要多少个斐波那契数相加减后能得到n (可以重复, 重复的算多次) 假设$dp(x)$为$x$的最小划分, 有$dp(x)=dp(x-F_k)+1$, 其中$F_k$为最接近$x ...