如何使用javascript通过文本框过滤下拉列表中的项目? [英] How to filter items in dropdown list through textbox using javascript?
本文介绍了如何使用javascript通过文本框过滤下拉列表中的项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用开始字符串显示下拉列表中的所有项目.
例如，如果我在文本框中键入app，则它必须显示所有以字母"app"开头的项目.像这样:Apple
我不想这样过滤:
苹果
菠萝
请帮助我....
这很紧急
这是我的代码:
I want to display all the items in the dropdown list with starting string.
For example if I type app in textbox it must display all the items starting with letter "app". Like this: Apple
I don''t want to filter like this:
Apple
Pineapple
Please Help me....
It''s very urgent
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search and Filter a DropDownList</title>
<script src="Scripts/jquery-1.3.2.min.js">
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $txt = $(''input[id$=txtNew]'');
var $ddl = $(''select[id$=DDL]'');
var $items = $(''select[id$=DDL] option'');
$txt.keyup(function() {
searchDdl($txt.val());
});
function searchDdl(item) {
$ddl.empty();
var exp = new RegExp(item, "i");
var arr = $.grep($items,
function(n) {
return exp.test($(n).text());
});
if (arr.length > 0) {
countItemsFound(arr.length);
$.each(arr, function() {
$ddl.append(this);
$ddl.get(0).selectedIndex = 0;
}
);
}
else {
countItemsFound(arr.length);
$ddl.append("<option>No Items Found</option>");
}
}
function countItemsFound(num) {
$("#para").empty();
if ($txt.val().length) {
$("#para").html(num + " items found");
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:textbox id="txtNew" runat="server" xmlns:asp="#unknown">
ToolTip="Enter Text Here"></asp:textbox><br />
<asp:dropdownlist id="DDL" runat="server" xmlns:asp="#unknown">
<asp:listitem text="Apple" value="1"></asp:listitem>
<asp:listitem text="Orange" value="2"></asp:listitem>
<asp:listitem text="Peache" value="3"></asp:listitem>
<asp:listitem text="Banana" value="4"></asp:listitem>
<asp:listitem text="Melon" value="5"></asp:listitem>
<asp:listitem text="Lemon" value="6"></asp:listitem>
<asp:listitem text="Pineapple" value="7"></asp:listitem>
<asp:listitem text="Pomegranate" value="8"></asp:listitem>
<asp:listitem text="Mulberry" value="9"></asp:listitem>
<asp:listitem text="Apricot" value="10"></asp:listitem>
<asp:listitem text="Cherry" value="11"></asp:listitem>
<asp:listitem text="Blackberry" value="12"></asp:listitem>
</asp:dropdownlist>
</div>
</form>
</body>
</html>
推荐答案
(function(){ var
(function() { var
txt =
(''input [id
(''input[id
这篇关于如何使用javascript通过文本框过滤下拉列表中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
