基于下拉菜单的javascript搜索

我有下面链接中的代码，其中有一个下拉菜单和一个文本框。 有一个javascript根据下拉列表中选择的选项显示表格。 我正在尝试添加一个搜索框，这样当用户从下拉列表中选择时，他可以在文本框中键入并获取请求的信息。 我应该从哪里开始，如何链接我当前的javascript代码？ 谢谢

---

我为您的搜索制作了一个代码，您可以在

$（文档）.ready（函数（）{
函数addRemoveClass（theRows）{
theRows.removeClass（“奇偶”）；
theRows.filter（“：odd”）.addClass（“odd”）；
theRows.filter（“：偶数”）.addClass（“偶数”）；
}
$（文档）.on（'keyup'，'#myInput'，函数（）{
所选变量=$（“#选择字段”）.val（）；
var search=$（“#myInput”）.val（）；
search=search.toLowerCase（）；
$（'tr[id！=“headlow”]）。hide（）；
$（'tr[id！=“headlow”]）。每个（函数（）{
var obj=$（本）；
var productName=obj.first（'td'）.html（）；
productName=productName.toLowerCase（）；
如果（productName.search（搜索）>=0）
{
如果（选中！=“全部”）
{
如果（对象属性（'位置'）==选中）
{
obj.show（）；
}
}否则{
obj.show（）；
}
}               
});
});
变量行=$（“表#myTable tr:not（：first child）”）；
addRemoveClass（行）；
$（“#selectField”）。在（“change”，function（）上{
所选var=此值；
如果（选中！=“全部”）{
rows.filter（“[position=“+selected+”]”）。show（）；
行。不（“[position=“+selected+”]）。隐藏（）；
var visibleRows=rows.filter（“[position=“+selected+”]”）；
addRemoveClass（可见行）；
}否则{
rows.show（）；
addRemoveClass（行）；
}
});
});

过滤表
按位置筛选
全部的
学生
助手
教授


名字
姓
年龄
位置
约翰
约翰的姓
25
学生
提米
蒂米的姓
22
助手
比利
比利的姓
40
教授
涡流
艾迪的姓
35
教授
艾玛
艾玛的姓
38
教授
艾米丽
艾米丽的姓
20
学生
杰克
杰克的姓
30
助手
罗伯特
罗伯特的姓
20
学生
丹尼
丹尼的姓
37
助手
埃里克
埃里克的姓
42
教授