输入框输入模糊查询匹配/提醒

最新推荐文章于 2024-06-13 17:25:04 发布

伏特加的滋味

最新推荐文章于 2024-06-13 17:25:04 发布

阅读量1.8w

点赞数

分类专栏： javaScript/jquery

本文链接：https://blog.csdn.net/yuanyuan214365/article/details/63254539

版权

javaScript/jquery 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

项目目的：实现一个输入框输入之后能够进行模糊查询匹配；这样给输入者提醒和匹配

项目的实现方式：首先检测输入框的内容变化，然后ajax请求把数据传到后台，通过查询匹配；最后就是数据的展示；

问题难点：查询后的数据展示，因为这不是一个下拉选择框，而是一个普通的选择框；

难点解决：div区域的重叠，就是把要显示的下拉数据位置设置在input框的下边

一、设计步骤：说明：该项目建立在前面的java web项目的基础

1、web项目的搭建，在这里就不在赘述，在前面的文章中已经介绍

2、jsp页面中输入框和下拉框的设计

3、ajax请求的设计

4、后台数据的处理

二、整体结构

1、jsp页面的设计；实现的功能，1、一个输入框和一个div，div隐藏；两个位置的设计 2、下拉框的设计，设计成一个table的结构 3、方向键的触发

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 <style type="text/css">  
    #searchresult  
    {  
        width: 140px;  
        position: absolute;  
        z-index: 1;  
        overflow: hidden;  
        left: 140px;  
        top: 71px;  
        background: #E0E0E0;  
        border-top: none;  
        
    }  
    #txt_search
    {
       font-size:15px;
       height:20px;
    }
    .line  
    {  
        font-size: 15px;  
        background: #E0E0E0;  
        width: 140px;  
        padding:0px;  
    }  
    .hover  
    {  
        background: #007ab8;  
        width: 140px;  
        color: #fff;  
    }  
    .std  
    {  
        width: 150px;  
    }  
</style> 
</head>
<body>
      success page
      
    <form id="form1" runat="server">  
    <div>  
        智能模糊查询提示  
        <input id="txt_search" type="text" style="width:140px;" />  
        <div id="searchresult" style="display: none;">  
        </div>  
     </div>       
     </form>      
     
       <script type="text/javascript">  
        $(function () {  
            $("#txt_search").keyup(function (evt) {  
                ChangeCoords(); //控制查询结果div坐标  
                var k = window.event ? evt.keyCode : evt.which;  
                //输入框的id为txt_search，这里监听输入框的keyup事件  
                //不为空 && 不为上箭头或下箭头或回车  
                if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) { 

                    $.ajax({  
                        type: 'post',  
                        async: true, //同步执行，不然会有问题  
                        dataType: "json",  
                        url: "jsonss",   //提交的页面/方法名  
                        data: "{'userName':'" + $("#txt_search").val() + "'}",             //参数（如果没有参数：null）  
                       
                        error: function (msg) {//请求失败处理函数  
                            alert("数据加载失败");  
                        },  
                        success: function (data) { //请求成功后处理函数。  
                           /*  var objData = eval("(" + data.userName + ")");   */
                             console.log(data);
                            if (data.length > 0) {  
                                var layer = "";  
                                layer = "<table id='aa'>";  
                                $.each(data, function (idx, item) {  
                                    layer += "<tr class='line'><td class='std'>" + item.userName + "</td></tr>";  
                                });  
                                layer += "</table>";  
  
                                //将结果添加到div中      
                                $("#searchresult").empty();  
                                $("#searchresult").append(layer);  
                                $(".line:first").addClass("hover");  
                                $("#searchresult").css("display", "");  
                                //鼠标移动事件  
  
                                $(".line").hover(function () {  
                                    $(".line").removeClass("hover");  
                                    $(this).addClass("hover");  
                                }, function () {  
                                    $(this).removeClass("hover");  
                                    //$("#searchresult").css("display", "none");  
                                });  
                                //鼠标点击事件  
                                $(".line").click(function () {  
                                    $("#txt_search").val($(this).text());  
                                    $("#searchresult").css("display", "none");  
                                });  
                            } else {  
                                $("#searchresult").empty();  
                                $("#searchresult").css("display", "none");  
                            }  
                        }  
                    });  
                }  
                else if (k == 38) {//上箭头  
                    $('#aa tr.hover').prev().addClass("hover");  
                    $('#aa tr.hover').next().removeClass("hover");  
                    $('#txt_search').val($('#aa tr.hover').text());  
                } else if (k == 40) {//下箭头  
                    $('#aa tr.hover').next().addClass("hover");  
                    $('#aa tr.hover').prev().removeClass("hover");  
                    $('#txt_search').val($('#aa tr.hover').text());  
                }  
                else if (k == 13) {//回车  
                    $('#txt_search').val($('#aa tr.hover').text());  
                    $("#searchresult").empty();  
                    $("#searchresult").css("display", "none");  
                }  
                else {  
                    $("#searchresult").empty();  
                    $("#searchresult").css("display", "none");  
                }  
            });  
            $("#searchresult").bind("mouseleave", function () {  
                $("#searchresult").empty();  
                $("#searchresult").css("display", "none");  
            });  
        });  
        //设置查询结果div坐标  
  
        function ChangeCoords() {  
            //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型  
            //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）  
            var left = $("#txt_search").position().left; //获取距离最左端的距离，像素，整型  
            var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）  
            $("#searchresult").css("left", left + "px"); //重新定义CSS属性  
            $("#searchresult").css("top", top + "px"); //同上  
        }  
  
    </script>  
</body>
</html>

2、实现结果

伏特加的滋味

关注

0
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
7
评论
输入框输入模糊查询匹配/提醒

项目目的：实现一个输入框输入之后能够进行模糊查询匹配；这样给输入者提醒和匹配项目的实现方式：首先检测输入框的内容变化，然后ajax请求把数据传到后台，通过查询匹配；最后就是数据的展示；问题难点：查询后的数据展示，因为这不是一个下拉选择框，而是一个普通的选择框；难点解决：div区域的重叠，就是把要显示的下拉数据位置设置在input框的下边一、设计步骤：说明：该项目建立在前
复制链接

扫一扫