【JavaWeb】前端input輸入框+後臺查詢+input框自動提示相關信息（類似搜索框的功能）

【代碼背景】

最近遇到一個需求，用戶提交特定信息，輸入姓名可以自動帶出這個人的相關信息，展示一個提示框，並自動填充到相應的輸入框內。這個功能的實現其實跟搜索框很像，輸入關鍵詞，下拉框提示相關信息，所以實現思路也是基於搜索框寫的。

這裏的demo寫了一個很簡單的 [姓名]、[生日]、[星座] 的提交頁面，輸入姓名，後臺查詢返回結果展示到提示框裏，用戶點擊後可以自動把對應的信息填充到控件裏。

【演示效果】

【開發工具】

移動端UI框架 - JQuery WeUI

【技術點】

#1-> <input>標籤的propertychange監聽事件

 <input id="regName" name="regName" class="weui-input" type="search" placeholder="請輸入姓名">

獲取輸入框的值後通過ajax去後臺StarInfoServlet查詢相關信息，返回前端拼接到提示框<div id="itemlists"></div>的HTML中

    $('#regName').bind('input propertychange', function (event) {
        const text = $("#regName").val();    // 獲取註冊姓名
        const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");  //驗證輸入的內容是中文字符

        if (reg.test(text)) {
            // 去後臺Servlet查詢和輸入名稱相關的itemlist
            $.ajax({
                data: {reg_name: text},
                type: "post",
                url: "StarInfoServlet",
                dataType: "json",
                beforeSend: function () {

                },
                success: function (dataArray) {
                    // 接收從後臺傳值來的數據，處理後拼接到提示框itemlists的HTML中                     
                },
                error: function (e) {
                    alert("ajax發生錯誤！" + e.status);
                },
                complete: function () {
                    // 提示框根據內容自動搜索展示
                    $('.item').each(function () {
                        var $self = $(this);
                        var flag = $self.text().search(text)
                        if (flag > -1) {
                            $self.css("display", "");
                        } else {
                            $self.css("display", "none");
                        }
                    });
                }
            });
        }
    });

#2-> 當input輸入框失去焦點時，清除提示框

input失去焦點的監聽事件是通過blur()實現的，但是由於提示框的單個item是<a>標籤，通過onclick()完成賦值操作，而blur()事件和onclick()會發生衝突。解決衝突的辦法是，通過監聽事件的className屬性單獨判斷，過濾掉綁定了onclick事件的標籤。

item對應的<a>標籤

<a class="weui-cell weui-cell_access item" style="display: none;background-color: #FFCCCC"
                   href="javascript:void(0);" οnclick="pick('張藝興')">
    <div class="weui-cell__hd">
        <img src="resources/img/flower_2.png" alt="" style="width:20px;margin-right:5px;display:block">
    </div>
    <div class="weui-cell__bd">
        <p><span>張藝興</span>&nbsp;&nbsp;<span>1991-10-07</span></p>
    </div>
    <div class="weui-cell__ft">天秤座</div>
</a>

demo提示框裏單獨的item是<a>標籤綁定了onclick事件pick()，class值是“weui-cell weui-cell_access item”，在blur()裏需要把這個過濾掉。

    $("#regName").blur(function (e) {
        // console.log(e.relatedTarget.className);
        // 解決input.blur()事件與onclick的衝突問題
        if (e.relatedTarget && typeof e.relatedTarget.className != null && e.relatedTarget.className == 'weui-cell weui-cell_access item') {
            return false;
        } else {
            $("#itemlist").css("display", "none");
        }
    });

#3-> input輸入框的樣式變化，紅色警告變綠色正常

input輸入框的初始狀態是紅色警告

注意這裏加了兩個id屬性

當用戶點擊提示框的item時，修改 [姓名] 框的樣式，紅色警告變綠色正常

// 去掉紅色提示
$("#font_tips").removeClass("weui-cell_warn");
// 後綴小圖標 紅色-> 綠色小勾勾
$("#icon_tips").removeClass("weui-icon-warn");
$("#icon_tips").addClass("weui-icon-success");

當用戶再次點擊 [姓名] 框輸入時，又再次變成了紅色警告狀態

// 增加紅色提示
$("#font_tips").addClass("weui-cell_warn");
// 後綴小圖標 綠色-> 紅色小勾勾
$("#icon_tips").removeClass("weui-icon-success");
$("#icon_tips").addClass("weui-icon-warn");

【完整代碼】

#1-> 數據準備，新建UserInfo表

#2-> index.jsp 頁面

<head></head> 引入相關JS、CSS

<head>
    <!--控制頁面自動適應屏幕大小-->
    <meta charset="UTF-8" name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>test for honey</title>
    <link rel="shortcut icon" href="#">

    <!--JQuery-->
    <script type="text/javascript" charset="UTF-8" src="resources/scripts/jquery-3.3.1.min.js"></script>
    <!--JQuery WEUI-->
    <script type="text/javascript" charset="UTF-8" src="resources/scripts/jquery-weui.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="resources/scripts/fastclick.js"></script>

    <!--WeUI CSS-->
    <link rel="stylesheet" type="text/css" href="resources/css/weui.css">
    <link rel="stylesheet" type="text/css" href="resources/css/jquery-weui.css">
    <!--鏈接外部樣式表-->
    <link rel="stylesheet" type="text/css" href="resources/css/mystyle_registration.css">

    <script>
        //當頁面開始加載的時候進行一系列初始化工作
        $(document).ready(function () {
            $('.item').css("display", "none");
            $("#itemlist").css("display", "none");
        });
    </script>
</head>

<body></body>採用WeUI樣式，寫input控件

<body>
<div class="weui-cells__title">Registration Infomation</div>
<div class="weui-cells">

    <!--姓名-->
    <div id="font_tips" class="weui-cell weui-cell_warn">
        <div class="weui-cell__hd"><label for="regName" class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
            <input id="regName" name="regName" class="weui-input" type="search" placeholder="請輸入姓名">
        </div>
        <div class="weui-cell__ft">
            <i id="icon_tips" class="weui-icon-warn"></i>
        </div>
    </div>

    <!--搜索框自動提示信息list-->
    <div id="itemlist" style="position: fixed;z-index:1;width: 100%;background-color: papayawhip">
        <div class="weui-cells" style="margin: 0">
            <div id="items"></div>
        </div>
    </div>

    <!--生日-->
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="birthdate" class="weui-label">生日</label></div>
        <div class="weui-cell__bd">
            <input id="birthdate" name="birthdate" class="weui-input" type="text" placeholder="請輸入生日">
        </div>
    </div>

    <!--星座-->
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="constellation" class="weui-label">星座</label></div>
        <div class="weui-cell__bd">
            <input id="constellation" name="constellation" class="weui-input" type="text" placeholder="請輸入星座">
        </div>
    </div>

</div>
</body>

<script type="text/javascript">

    // 根據輸入框的內容，自動提示相關內容
    $('#regName').bind('input propertychange', function (event) {

        // 設置【姓名】框的樣式
        // 增加紅色提示
        $("#font_tips").addClass("weui-cell_warn");
        // 後綴小圖標 綠色-> 紅色小勾勾
        $("#icon_tips").removeClass("weui-icon-success");
        $("#icon_tips").addClass("weui-icon-warn");

        // 獲取註冊姓名
        const text = $("#regName").val();
        // 如果姓名輸入框爲空，清空提示信息
        if (text === "") {
            console.log("當前輸入框爲空！");
            $('.item').css("display", "none");
            $("#itemlist").css("display", "none");
        } else {

            $("#itemlist").css("display", ""); //打開itemlist的div域
            $('.item').css("display", "none"); //清空所有的items 不顯示

            // ----------表單驗證通過之後---------
            const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");  //驗證輸入的內容是中文字符
            if (reg.test(text)) {
                // 去後臺Servlet查詢和輸入名稱相關的itemlist
                $.ajax({
                    data: {
                        reg_name: text
                    },
                    type: "post",
                    url: "StarInfoServlet",
                    dataType: "json",
                    beforeSend: function () {
                        $.showLoading("正在查詢中...");  // 打開loading
                    },
                    success: function (dataArray) {
                        $.hideLoading();  // 關閉loading

                        console.log("------------dataArray----------");
                        console.log(dataArray);

                        let itemlists = dataArray;
                        let itemlistHtml = "";
                        // 循環取dataArray--拼接HTML字符串
                        for (let i = 0; i < itemlists.length; i++) {

                            const username = itemlists[i].username;
                            const birthdate = itemlists[i].birthdate;
                            const constellation = itemlists[i].constellation;

                            itemlistHtml += "<a class=\"weui-cell weui-cell_access item\" style=\"display: none;background-color: #FFCCCC\"\n" +
                                "                   href=\"javascript:void(0);\" οnclick=\"pick('" + username + "','" + birthdate + "','" + constellation + "')\">\n" +
                                "                    <div class=\"weui-cell__hd\">\n" +
                                "                        <img src=\"resources/img/flower_2.png\" alt=\"\" style=\"width:20px;margin-right:5px;display:block\">\n" +
                                "                    </div>\n" +
                                "                    <div class=\"weui-cell__bd\">\n" +
                                "                        <p><span>" + itemlists[i].username + "</span>&nbsp;&nbsp;<span>" + itemlists[i].birthdate + "</span></p>\n" +
                                "                    </div>\n" +
                                "                    <div class=\"weui-cell__ft\">" + itemlists[i].constellation + "</div>\n" +
                                "                </a>";
                        }

                        // console.log("-----------itemlistHtml---------")
                        // console.log(itemlistHtml);

                        // HTML賦值到<div id="items"></div>
                        $("#items").html(itemlistHtml);
                    },
                    error: function (e) {
                        alert("ajax發生錯誤！" + e.status);
                    },
                    complete: function () {
                        $('.item').each(function () {
                            var $self = $(this);
                            var flag = $self.text().search(text)
                            if (flag > -1) {
                                $self.css("display", "");
                            } else {
                                $self.css("display", "none");
                            }
                        });
                    }
                });
            }
        }
    });

    // input輸入框失去焦點時，清除提示框
    $("#regName").blur(function (e) {
        // console.log(e.relatedTarget.className);
        // 解決input.blur()事件與onclick的衝突問題
        if (e.relatedTarget && typeof e.relatedTarget.className != null && e.relatedTarget.className == 'weui-cell weui-cell_access item') {
            return false;
        } else {
            $("#itemlist").css("display", "none");
        }
    });

    // 點擊item把item賦值到輸入框內
    function pick(username, birthdate, constellation) {
        console.log("val: " + username + " " + birthdate + " " + constellation);

        // 賦值到對應的輸入框
        $('#regName').val(username);
        $('#birthdate').val(birthdate);
        $('#constellation').val(constellation);

        // 設置【姓名】框的樣式
        // 去掉紅色提示
        $("#font_tips").removeClass("weui-cell_warn");
        // 後綴小圖標 紅色-> 綠色小勾勾
        $("#icon_tips").removeClass("weui-icon-warn");
        $("#icon_tips").addClass("weui-icon-success");

        // 清空提示框的內容
        $('.item').css("display", "none");
        $("#itemlist").css("display", "none");
    }

</script>

Bug記錄

#1-> weui-cells_form 會導致 weui-cell__ft 佔用空間變成0

使用了WeUI的列表樣式，如下圖所示

<div class="weui-cells__title">帶圖標、說明、跳轉的列表項</div>
<div class="weui-cells">
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd">
            <img src="resources/img/flower_2.png" alt="" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui-cell__bd">
            <p><span>張藝興</span>&nbsp;&nbsp;<span>1991-10-07</span></p>
        </div>
        <div class="weui-cell__ft">天秤座</div>
    </a>
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd">
            <img src="resources/img/flower_2.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p><span>華晨宇</span>&nbsp;&nbsp;<span>1990-02-07</span></p>
        </div>
        <div class="weui-cell__ft">水瓶座</div>
    </a>
</div>

這裏的<div class="weui-cell__ft">天秤座</div> 佔用了63.75x29px的空間大小

如果加上<div class="weui-cells_form"> 請注意，佔用空間會變成0！

<div class="weui-cells weui-cells_form">

【JavaWeb】前端input輸入框+後臺查詢+input框自動提示相關信息（類似搜索框的功能）

【SpringBoot】第一次運行SpringBoot的HelloWorld Demo錯誤記錄

【MySQL】安裝MySQL 8.0.19中遇到的問題小結

【maven】記第一次使用maven創建web工程遇到的坑

【maven】webapp項目發佈到 weblogic 資源文件報錯404找不到

【spring】關於@Autowired警告的一點說明

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結