In the last search function, some fans mentioned whether it can be set as optional search criteria. Naturally, the answer is yes, so I added a drop-down option based on the previous week

Effect display

Here I implement the function of drop-down item based on the two ways of select tag and a tag.

Knowledge collusion

1. Implementation based on select tag (simplest)

<select id="select_type" style="font-weight:700">
  <option>Please select search type</option>
  <option>network IP</option>
  <option>address</option>
  <option>person liable</option>
</select>

This method is a common way to implement pull-down items. To get the contents of the selection box, you can document.getElementById("select_type").value.

Then the search type type and content are passed to the background as parameters. I still pass here window.location.href To relocate to the new interface.

<script>
    (function(){
      $('input[id="search"]').on('click', function(){
                var content = document.getElementById("search_content").value;
                var select_type = document.getElementById("select_type").value;
                var data = {
                    "search_content":content
                };
                $.ajax({
                    type: "get",
                    url: "/",
                    data: data,
                    dataType: "json",
                    success:window.location.href="search_result/"+select_type+'/'+content
                    });
        });
        })();
</script>

2. Implementation based on a tag

<ul class="nav">
  <a href="#" id="select_ Type2 "> please enter search type</a>
  <ul class="plat">
    <li><a href="#"Onclick =" selectfunction ('network IP ') "> Network IP</a></li>
    <li><a href="#"Onclick =" selectfunction ('address') "> address</a></li>
    <li><a href="#"Onclick =" selectfunction ('responsible person ') "> responsible person</a></li>
  </ul>
</ul>

Here, a tag is used to realize the hyperlink function of each option, and the function of each button jumping to a new url can be realized. But I don't need it on this side, so I set the href = 'ා'. As for the reason why the ul tag should be set to class, it is mainly for the sake of good-looking format, which will be discussed later.

Then the corresponding script method (function: after clicking the option, display the result of the option) is as follows:

<script>
    function selectfuction(args){
        var type = document.getElementById("select_type2");
        type.innerHTML = args
    }
</script>

Accordingly, when getting the contents of the selection box, you can use the type.innerText To achieve. Notice here, not through type.value In this way, the "network IP" equivalent cannot be obtained.

If you simply implement the function like this, the interface display will be ugly, as follows:

After clicking the option, other options are still displayed on the interface, which makes people feel very fast. Therefore, set the display of ul tag. The following style format References:

https://blog.csdn.net/qq_28919991/article/details/82860218

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;
            margin-top: 1px;
        }
        a{
            display: block;
        }

        .plat{
            display: none;
        }
        .nav{
             float: left;
             margin-left: 1px;
         }
        .nav:hover .plat{
            display: block;
            clear: both;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }
</style>

Sample code

There is no difference between the sample code and the last one, only the function of drop-down option is added. Therefore, you can modify it by yourself or download it directly from GitHub https://github.com/yuzipeng05/flask_test.git

 

Author: Huawei cloud contributing developer Pengge thief is excellent