Jquery + Bootstrap 實現搜尋框

孔德昌發表於2020-12-26
jQueryboot
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css" type="text/css">
    <!-- <script src="./js/bootstrap.js" type="text/javascript"></script> -->
    <script src="./js/jquery.js" type="text/javascript"></script>
</head>

<body>
    <div class="navbar navbar-dark bg-primary navbar-expand-lg fixed-top">
        <div class="navbar">
            <a class="navbar-brand" href="#">Kongjs</a>
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
        <div class="narbar">
            <form class="form-inline">
                <input class="form-control mr-sm-2 md-sm-4" type="search" placeholder="Search" aria-label="Search"
                    id="search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit" id="submit">Search</button>
            </form>
            <ul class="nav flex-column" id="show">
            </ul>
        </div>
        <div />

        <!-- <select id="show" class="show">
    <option value="1"></option>
</select> -->
        <!-- <span class="show" id="show"></span> -->
        <!-- <div class="content">
        <input type="text" id="search" name="keyword">
        <input type="button" value="搜尋一下">
        <div class="show" id="show"></div>
    </div> -->
        <script>
            'use strict';
            $(() => {
                $('#search').keyup(() => {

                    $('#show').html('').hide();
                    $('#show').css("position", "absolute");
                    let keyword = $('#search').val();
                    console.log(keyword);
                    if (!keyword.trim()) return;
                    let url = 'http://localhost:8080/search';
                    let params = 'keyword=' + keyword;

                    $.post(url, params,
                        (data, textStatus, jqXHR) => {
                            console.log(data);
                            let str = '';
                            $.each($(data), (indexInArray, valueOfElement) => {
                                // str +=
                                //     "<div οnmοuseοver='fun1(this)' οnmοuseοut='fun2(this)' οnclick='fun3(this)'>" +
                                //     valueOfElement + "</div>";
                                str +=
                                    "<li class='nav-item stop' οnmοuseοver='fun1(this)' οnmοuseοut='fun2(this)' οnclick='fun3(this)'>" +
                                    "<a class='nav-link' href=''>" + valueOfElement +
                                    "</a> </li>";
                                // str += "<option value="+indexInArray+">"+valueOfElement+"</option>"

                            });
                            console.log(str);
                            $('#show').html(str).show();
                        }, "json");
                    $('.stop').mouseout(() => {
                        $('#show').css("display", "none");
                    });
                });
                $('#submit').on('click', () => {
                    let keyword = $('#search').val().trim();
                    $.post("http://localhost:8080/search", {
                            "keyword": keyword
                        },
                        (data, textStatus, jqXHR) => {}, "json");
                });
            });

            let fun1 = (param) => {
                $(param).css('background-color', 'gray');
            }

            let fun2 = (param) => {
                $(param).css('background-color', 'white');
            }

            let fun3 = (param) => {
                let text = $(param).text();
                $('#search').val(text);
                $('#show').hide();
            }
        </script>
</body>

</html>

相關文章