一、项目中需要用到此功能，使用过EasyUI中的Combobox，网上也搜过相应的解决办法，对于我的项目来说都不太合适，因为我还是喜欢比较纯粹的东西，就自己动手写了一个，比较简单，但还算能用，我的项目中也已经使用上了，做了个小demo作为记录，有需要的自己复制代码改一改就好了。(向立凯)
先来一张效果展示图：
接下来是代码，纯html+css+jQuery的，建个新页面复制进去即可，复制代码注意自己重新导入一个jquery(文本框模糊匹配)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="jquery-1.7.2.min.js"></script> 6 <title></title> 7 8 <style type="text/css"> 9 #div_main { 10 margin: 0 auto; 11 300px; 12 height: 400px; 13 border: 1px solid black; 14 margin-top: 50px; 15 } 16 17 #div_txt { 18 position: relative; 19 200px; 20 margin: 0 auto; 21 margin-top: 40px; 22 } 23 24 #txt1 { 25 99%; 26 } 27 28 #div_items { 29 position: relative; 30 100%; 31 height: 200px; 32 border: 1px solid #66afe9; 33 border-top: 0px; 34 overflow: auto; 35 display: none; 36 } 37 38 .div_item { 39 100%; 40 height: 20px; 41 margin-top: 1px; 42 font-size: 13px; 43 line-height: 20px; 44 } 45 </style> 46 </head> 47 <body> 48 <div id="div_main"> 49 <!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框--> 50 <form autocomplete="off"> 51 <div id="div_txt"> 52 <!--要模糊匹配的文本框--> 53 <input type="text" id="txt1" /> 54 55 <!--模糊匹配窗口--> 56 <div id="div_items"> 57 <div class="div_item">周杰伦</div> 58 <div class="div_item">周杰</div> 59 <div class="div_item">林俊杰</div> 60 <div class="div_item">林宥嘉</div> 61 <div class="div_item">林妙可</div> 62 <div class="div_item">唐嫣</div> 63 <div class="div_item">唐家三少</div> 64 <div class="div_item">唐朝盛世</div> 65 <div class="div_item">奥迪A4L</div> 66 <div class="div_item">奥迪A6L</div> 67 <div class="div_item">奥迪A8L</div> 68 <div class="div_item">奥迪R8</div> 69 <div class="div_item">宝马GT</div> 70 </div> 71 </div> 72 </form> 73 </div> 74 </body> 75 </html> 76 <script type="text/javascript"> 77 78 //弹出列表框 79 $("#txt1").click(function () { 80 $("#div_items").css('display', 'block'); 81 return false; 82 }); 83 84 //隐藏列表框 85 $("body").click(function () { 86 $("#div_items").css('display', 'none'); 87 }); 88 89 //移入移出效果 90 $(".div_item").hover(function () { 91 $(this).css('background-color', '#1C86EE').css('color', 'white'); 92 }, function () { 93 $(this).css('background-color', 'white').css('color', 'black'); 94 }); 95 96 //文本框输入 97 $("#txt1").keyup(function () { 98 $("#div_items").css('display', 'block');//只要输入就显示列表框 99 100 if ($("#txt1").val().length <= 0) { 101 $(".div_item").css('display', 'block');//如果什么都没填，跳出，保持全部显示状态 102 return; 103 } 104 105 $(".div_item").css('display', 'none');//如果填了，先将所有的选项隐藏 106 107 for (var i = 0; i < $(".div_item").length; i++) { 108 //模糊匹配，将所有匹配项显示 109 if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) { 110 $(".div_item").eq(i).css('display', 'block'); 111 } 112 } 113 }); 114 115 //项点击 116 $(".div_item").click(function () { 117 $("#txt1").val($(this).text()); 118 }); 119 120 </script>
二、
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9 <script src="jquery-1.7.2.min.js"></script> 10 <style type="text/css"> 11 #txt { 12 200px; 13 height: 20px; 14 15 } 16 .sp1:hover { 17 background-color:blue; 18 } 19 </style> 20 </head> 21 <body> 22 <form id="form1" runat="server"> 23 <div style=" 205px; height:26px;" id="div1"> 24 <input type="text" id="txt" /><br /> 25 <div id="div2" style=" 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;"> 26 <asp:Repeater ID="Repeater1" runat="server"> 27 <ItemTemplate> 28 <div style="200px;" class="sp1" onmouseover="click1(this);"><%#Eval("AreaName") %></div> 29 </ItemTemplate> 30 </asp:Repeater> 31 </div> 32 </div> 33 </form> 34 </body> 35 </html> 36 <script type="text/javascript"> 37 document.getElementById("txt").onfocus = function () { 38 document.getElementById("div2").style.display = "block"; 39 } 40 document.getElementById("txt").onblur = function () { 41 document.getElementById("div2").style.display = "none"; 42 } 43 44 document.getElementById("txt").onkeyup = function () { 45 var txt = document.getElementById("txt").value; 46 47 document.getElementById("div2").innerHTML = ""; 48 $.ajax({ 49 url: "ajax/Handler.ashx", 50 data: {"txt":txt}, 51 type: "post", 52 dataType: "json", 53 success: function (data) { 54 55 for (i in data) { 56 var end = ""; 57 end += "<div style='200px;' class='sp1' onmouseover='click1(this);' >" + data[i].name + "</div>"; 58 59 document.getElementById("div2").innerHTML += end; 60 } 61 62 63 } 64 65 }); 66 67 } 68 69 70 function click1(aaa) { 71 72 document.getElementById("txt").value = aaa.innerHTML; 73 74 } 75 </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(); } } }