文本框模糊匹配（纯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">

<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();
}
}
}