This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

1. HTML layout

To achieve the design of the relevant needs of the area, THE HTML layout is as follows:

1. Search area: contains search box and search button

2. Search result matching area

3. Background area: in order to see the search result area more clearly

The core HTML code for the layout is as follows:

 <div class="data_fram">
        <div class="search">
            <input type="text" id="value" placeholder="Enter what you want to search for.">
            <input type="submit" id="submit" value="Search">
        </div>
  </div>
  <div class="show"></div>
  <div class="test">I'm background content</div>
Copy the code

2. CSS styles

Because mainly for the practice of javascript code, HTML layout style information how convenient how to come, the style is as follows:

The layout after adding the style information is as follows:

Third, Javascript effects

1, set the search data: here for the sake of simplicity, we will customize an array of data, general formal websites will send requests to their own servers to obtain the stored data in the database; Gets the search input box and the search results match the display box label object

let data = ["javascript"."css"."html"."c++"."java"."python"."php"."vue"];
let input = document.getElementById("value");
let show = document.getElementsByClassName("show") [0];
Copy the code

2, the search input box object set to obtain the focus response event, when the user enters a character into the input box, it will immediately carry out fuzzy matching with the database, the matching results will be displayed to the search results matching display area.

input.addEventListener('keyup'.() = > {
    show.style.display = "block";
    let showStr = "";
    data.forEach((item) = > {
        if(item.indexOf(input.value) ! = -1) {
            showStr += `<p>${item}</p>`}})if(! input.value || showStr =="") {
        show.innerHTML = "No results yet."
    } else{ show.innerHTML = showStr; }})Copy the code

3. Set the object of search input box to obtain out-of-focus response event. When the mouse focus is not in the input box, clear the display area of search results matching.

input.addEventListener('blur'.() = > {
    show.style.display = "none";
    input.value = "";
})
Copy the code

B station video website: www.bilibili.com/video/BV1wv…