根据输入内容自动筛选数据--基于option操作
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<XXXX.XXX.Data.TM_TAB_USER>>" %> <!DOCTYPE html> <html> <head id="Head1" runat="server"> <title>选择人员</title> <link href="../../css/css.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery-1.5.1.js" charset="gb2312"></script> <script language="javascript" type="text/javascript"> function btnsubmits() { var userAccount = document.getElementById("userAccount").value; if (userAccount != "") { window.returnValue = userAccount; window.close(); } else { alert("请选择用户"); } } function searchUser() { var len = document.getElementById("userAccount").options.length var condition = document.getElementById("searchText").value; var hdLen = document.getElementById("hdLen").value; var hideArr = new Array; var allArr = new Array; if (len < hdLen) { len = hdLen; } else { document.getElementById("hdLen").value = len; } for (var i = 0; i < len; i++) { allArr.push(i); } arrHandle($('select'), allArr, 'show'); len = document.getElementById("userAccount").options.length; for (var i = 0; i < len; i++) { var temStr = document.getElementById("userAccount").options[i].text; if (temStr.indexOf(condition) != -1) { } else { hideArr.push(i); } } arrHandle($('select'), hideArr, 'hide'); } function arrHandle(obj, arr, type) { if ($.isArray(arr)) { var len = arr.length; for (i = 0; i < len; i++) { var optionNow = obj.find("option").eq(arr[i]); var optionP = optionNow.parent("span"); if (type == "show") { if (optionP.size()) { optionP.children().clone().replaceAll(optionP); } } else { if (!optionP.size()) { optionNow.wrap("<span style='display:none'></span>"); } } } } } </script> </head> <body bgcolor="#F2F9FD"> <div align="center" bgcolor="#F2F9FD"> <form> <input type="hidden" value="0" id="hdLen" /> <table> <tr> <td> <h4 style="color: Blue; font-size: 19px"> 双击选择用户</h4> </td> </tr> <tr> <td> <input type="text" id="searchText" onkeyup="javascript:searchUser()" style="width: 300px;" /> </td> </tr> <tr> <td> <select id="userAccount" name="userAccount" ondblclick="javascript:btnsubmits()" multiple="true" style="width: 300px; height: 300px"> <% foreach (var item in Model) { %> <option value="<%=item.USER_ACCOUNT%>" id="id"> <%=item.USER_ACCOUNT%>/<%=item.USER_NAME %></option> <% } %> </select> </td> </tr> </table> </form> </div> </body> </html>