JavaScript 搜索下拉

在做项目的时候，有地方需要用到搜索下拉，发现找插件需要引入第三方js及样式，还要去撸css/js放到服务器（怕别个的cdn失效），这样感觉很烦，于是自己搞了个 ，代码比较乱 但很好用，记下来先

 

<style type="text/css">
#searchResult{margin: 0;position: absolute;width: 225px;display: none;background-color: #fff;max-height:300px;overflow-y:scroll; overflow-x:hidden; }
#searchResult li{
width:220px;line-height: 30px;
}
#searchResult li:hover{
background-color: green;
}
</style>
<div id="searchBox" style="position: relative;">
<input style="width:220px;height: 30px;" id="agentSearch" />
<input type="hidden" name="agentId" value="<?php if( $MmCommon->GetGpc('agentId') ){echo $MmCommon->GetGpc('agentId');}?>">
<ul id="searchResult">
<?php foreach($agents_list as $kal=>$val){?>
<li data-name="<?php echo $val['name'];?>" data-val="<?php echo $val['id'];?>" οnclick="selectResult(this);"><?php echo $val['name'];?></li>
<?php }?>
</ul>
</div>
<script type="text/javascript">
var resultArr = $('#searchResult li');
function selectResult(e){
var name = $(e).attr('data-name');
var val = $(e).attr('data-val');
$('#agentSearch').val(name);
$('#agentId').val(val);
$('#searchResult').hide();
}
$(document).click(function(){
var b = window.event.srcElement;
if($(b).parents('#searchBox').length > 0){
return true;
}else{
$('#searchResult').hide();
}
});
$('#agentSearch').focus(function(){
$('#searchResult').show();
});
$('#agentSearch').keyup(function(){
var li = '';
var ipt = $(this).val();
if( ipt ){
for(var i=0;i<resultArr.length;i++){
var ht = resultArr[i];
if( $(ht).html().indexOf(ipt)>=0 ){
li += "<li οnclick='selectResult(this)' data-name='"+$(ht).attr('data-name')+"' data-val='"+$(ht).attr('data-val')+"'>"+$(ht).html()+"</li>";
}
}
}else{
for(var i=0;i<resultArr.length;i++){
var ht = resultArr[i];
li += "<li οnclick='selectResult(this)' data-name='"+$(ht).attr('data-name')+"' data-val='"+$(ht).attr('data-val')+"'>"+$(ht).html()+"</li>";
}
}
$('#searchResult').html(li);
});
</script>

转载于:https://www.cnblogs.com/pengwen/p/7686726.html