网页上面如何做带搜索筛选功能的选择框，下拉列表。
例如图1，点击选择型号的箭头，就会出现下拉框，下拉框显示所有可选项，然后输入“U”的时候，下面就会筛选出所有带“U”的选项。如果把“U”删除掉，那所有选项又出来了。---...
例如图1，点击选择型号的箭头，就会出现下拉框，下拉框显示所有可选项，然后输入“U”的时候，下面就会筛选出所有带“U”的选项。如果把“U”删除掉，那所有选项又出来了。
---------------------------------------------------------
谢谢大家，我需要的是实现的源码。谢谢。
需要的是筛选出来之后可以选择的选项。。 展开
---------------------------------------------------------
谢谢大家，我需要的是实现的源码。谢谢。
需要的是筛选出来之后可以选择的选项。。 展开
4个回答
展开全部
如果仅考虑客户端，那么用的就是数据字典，将数据缓存起来。
考虑到数据来自于服务端的比较多，且结合AJAX技术，下拉框中的内容每发生一次改变，就会查询一次服务器，然后服务端对客户端的请求进行处理，找到响应的数据，并反馈给客户端，然后客户端进行显示，这种下拉框式的列表，如今一般都是自己写的样式了。
为避免页面重复刷新，推荐使用AJAX进行异步交互。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>123</title>
<style type="text/css">
#list
{
height: 100px;
width: 155px;
border:1px solid #FFCC00;
}
</style>
</head>
<body>
<input id="search"/>
<div id="list" style="display: none;">
<ul id="group">
</ul>
</div>
</body>
<script LANGUAGE="JAVASCRIPT">
var array = [["a", "ab", "abc"], ["d", "de", "def"]];
var search = document.getElementById("search");
var list = document.getElementById("list");
var group = document.getElementById("group");
search.addEventListener("input", input, false);
//search.addEventListener("keyup", keyup, false);
function input(){
//删除所有子节点
var children = group.childNodes;
while(group.lastChild)
{
group.removeChild(group.lastChild);
list.style.display = "none";
}
for(var i = 0; i < array.length; i++)
{
for(var j = 0; j < array[i].length; j++)
{
if(search.value.toString() == array[i][j])
{
list.style.display = "block";
show(array[i]);
}
}
}
}
//显示内容
function show(arr){
var temp = arr;
for(var k = 0; k < temp.length; k++)
{
if(temp[k].indexOf(search.value) > -1)
{
var ele = document.createElement("li");
group.appendChild(ele);
ele.innerHTML = temp[k];
}
}
}
</script>
</html>
如果要兼容IE，input事件名称要做修改。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个要看你是不是需要查询数据库了
如果是需要查库的，就用AJAX
<input id="person_name" name="person_name" class="inp_w20" type="text" style="width:40%;" value=""/>
$(document).ready(function () {
$('.messageAjax').hide();
$("#person_name").keyup(function () {
var name = $("#person_name").val();
var data = 'op=AjaxName&person_name=' + encodeURI(name);
$.ajax({
type: "GET",
url: "person.do",
data: data,
success: function (Msg) {
var iof = $("#person_name").offset();
$(".messageAjax").css({ "left" : iof.left,"top" : iof.top+21 });
$('.messageAjax').show();
$('.namelist').html(Msg);
$('li').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
}
});
})
});
<div id="messageAjax" class="messageAjax">
<div class="namelist">
</div>
</div>
不需要查库的 ，需要把结果提前取出来，然后拼串
<input name="seach1" type="text" id="seach1" onkeyup="javascript:showundraw(“结果参数串”);" style="width:160" value=''/>
function showundraw(ret){
var ary = ret.split(";");
var htm = "";
//获取搜索框的值，并进行数组排序
var tmp = document.getElementById("seach1").value;
if(tmp!=""){
ary.sort(function(a,b){return a.indexOf(''+tmp+'')==-1?1:-1;});
}
for(var i=0;i<ary.length;i++){
var item = ary[i].split(",");
htm += (i+1)+".<span onclick=parent.saveobjinfo2('<%= typ %>','<%= xys %>','"+item[1]+"','"+item[0]+"') style='color:blue;text-decoration:underline;cursor:hand'>"+item[1]+"</span><br>";
}
//alert(htm);
divls.innerHTML = htm;
}
如果是需要查库的，就用AJAX
<input id="person_name" name="person_name" class="inp_w20" type="text" style="width:40%;" value=""/>
$(document).ready(function () {
$('.messageAjax').hide();
$("#person_name").keyup(function () {
var name = $("#person_name").val();
var data = 'op=AjaxName&person_name=' + encodeURI(name);
$.ajax({
type: "GET",
url: "person.do",
data: data,
success: function (Msg) {
var iof = $("#person_name").offset();
$(".messageAjax").css({ "left" : iof.left,"top" : iof.top+21 });
$('.messageAjax').show();
$('.namelist').html(Msg);
$('li').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
}
});
})
});
<div id="messageAjax" class="messageAjax">
<div class="namelist">
</div>
</div>
不需要查库的 ，需要把结果提前取出来，然后拼串
<input name="seach1" type="text" id="seach1" onkeyup="javascript:showundraw(“结果参数串”);" style="width:160" value=''/>
function showundraw(ret){
var ary = ret.split(";");
var htm = "";
//获取搜索框的值，并进行数组排序
var tmp = document.getElementById("seach1").value;
if(tmp!=""){
ary.sort(function(a,b){return a.indexOf(''+tmp+'')==-1?1:-1;});
}
for(var i=0;i<ary.length;i++){
var item = ary[i].split(",");
htm += (i+1)+".<span onclick=parent.saveobjinfo2('<%= typ %>','<%= xys %>','"+item[1]+"','"+item[0]+"') style='color:blue;text-decoration:underline;cursor:hand'>"+item[1]+"</span><br>";
}
//alert(htm);
divls.innerHTML = htm;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
亲，这是我手写的，功能可能没有那么强大，不过你所说的功能有了，这个没有图片，所以那个下拉按钮很小或者没有，你自己补一张图片或者在input 里面加个 value
更多追问追答
追问
亲，少一个文件，devtools/Backbone_js_files/jquery.js
追答
那你用你的 jquery.js 替换一下吧，任意版本都可以！
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
