输入框，联想搜索，下拉显示搜索结果，JQUERY仿百度搜索框下拉效果。

最新推荐文章于 2024-08-12 16:40:27 发布

南宁老罗

最新推荐文章于 2024-08-12 16:40:27 发布

阅读量3.4k

点赞数 5

分类专栏： jq 文章标签：输入框，联想搜索 JQUERY仿百度搜索框下拉效果仿百度搜索框下拉效果

本文链接：https://blog.csdn.net/m0_38093376/article/details/82184386

版权

jq 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：项目页面需要有一个输入框，用户输入部分卡号以后，模糊查询后台数据，返回结果供用户点选。

实现思路：用jQuery，在输入框input 中使用 keyup事件，触发异步，到后台获取相似卡号String，再页面进行拼接ul li,最终用户点击弹出的查询结果，写入input输入框。

代码：

页面部分：//记得先引入jQuery

  <script type="text/javascript">
    $(document).ready(function() {       
        //输入框 联想搜索下拉提示
        var result=new Array();
        $('#cardNo').keyup(function(event){
            if($('#cardNo').val()!=''){  //当输入框的值不为空的时候才能发送请求
                $.ajax({
                    type : "POST",
                    url:"${ctx}/testCard/getCardNoList",// 跳转到 action  
                    async:true,
                    data : {"cardNo":$('#cardNo').val()},
                    dataType : 'text',        
                    success:function(res){
                        //res返回数据格式：<String> a,b,c,d,
                        $('li').remove();//先清空之前记录
                        res=res.substring(0,res.length-1);//去掉末位逗号
                        console.log(res);
                        result=res.split(',');//转数组
                        for(var i=0;i<result.length;i++){
                            oli_i=$('<li> '+result[i]+' </li>');//拼接li
                            console.log(oli_i);
                            $('#box ul').append(oli_i);//添加 li
                            //点击查询结果写入input
                            $('#box ul li').eq(i).click(function(){
                                $('#cardNo').val($(this).text());//写入input
                                $('li').remove();//添加完成关闭 li
                            });
                        };
                    },
                    error:function(res){
                        console.log(res) ;
                    }
                });
            }else{
                $('#box ul').html('') ;   //如果输入框的词都删除了，把获取的数据结果也清空，因为已经获取到数据了，即使阻止再次发送请求也不会把已经获得的数据清除，所以这里直接用了最简单的办法，直接清空数据
            };
        });      
        
    });  
        </script>
    <style type="text/css">
             ul,li{ line-height: 14px;    font-size: 17px; padding: 5px 10px;  margin-left: 84px;  width: 200px;   }
            li{   list-style:none;  }
            li.current{  background:#CCCCCC; color:#0000FF; cursor: pointer;  }
            li:hover{  background:#CCCCCC;   color:#0000FF;  cursor: pointer; }    
    </style>
</head>
<body>
    <ul class="nav nav-tabs">
        
    </ul><br/>
    <form:form id="inputForm" modelAttribute="testCard" action="${ctx}/testCard/save" method="post" class="form-horizontal">
      
        <div class="control-group">
            <label class="control-label">卡号：</label>
            <div class="controls">
                <form:input path="cardNo" htmlEscape="false" maxlength="30" class="input-xlarge"   /><span style="font-style:oblique;color: #ff5500">&nbsp;&nbsp;&nbsp;&nbsp;提示：输入卡号可以进行模糊查询。</span>
            </div>
            <div class="box" id="box">
                <ul   >
    
                </ul>
            </div>
        </div>  
       </form:form>

</body>

后台部分：

 @RequestMapping(value = "getCardNoList")
    @ResponseBody
    public String getCardNoList(String cardNo, Model model, RedirectAttributes redirectAttributes, HttpServletRequest request, HttpServletResponse response) {
        
      
        List<CardInfo> CardInfoList=cardInfoService.findList(cardInfo);  //获取list

        String r="";
         for (int i = 0; i <CardInfoList.size(); i++) {
            r=r+CardInfoList.get(i).getCardNo()+","    ;    //拼装String   
        }    
         return r;

效果：