❝
“In the ancient times, not only the world of great talent, also the great fortitudonous ambition” – Su Shi
❞
Writing in the front
When we use a certain search engine, its page spam is always bothering us. With this blog, we can write our own search interface to a certain degree, and in this way we can integrate songs and apps into one interface, which is easy for us to use. Let’s get down to business!!
The final result is shown below
Case analysis
The HTML code
Take a look at the static pages of the case
It is implemented using HTML code, the specific code is as follows:
<! -- Search box overall container -->
<div class="container">
<! Search box container -->
<div class="search-container">
<! -- Search box -->
<input type="text" id="serach">
<! -- Search for containers in the prompt box -->
<div class="content">
<ul></ul>
</div>
</div>
<! -- button container -->
<div class="button">
<a id="serachBtn" href="#">The baidu</a>
</div>
</div>
Copy the codeCSS styles
The CSS style code looks like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
/* Outermost container */
.container {
width: 654px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Search box style */
.search-container {
width: 546px;
}
input {
display: block;
width: 546px;
height: 44px;
padding: 12px 16px;
font-size: 16px;
margin: 0;
outline: 0;
box-shadow: none;
border-radius: 10px 0 0 10px;
border: 2px solid #c4c7ce;
background: #fff;
color: # 222;
overflow: hidden;
}
/* The border color changes when the button gets focus */
input:focus {
border: 2px solid #4e6ef2;
}
/* Button style */
.button {
position: absolute;
width: 108px;
top: 0;
right: 0;
}
a {
text-decoration: none;
display: block;
cursor: pointer;
width: 108px;
height: 44px;
line-height: 45px;
padding: 0;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
color: #fff;
font-weight: 400;
text-align: center;
}
/* Search prompt box style */
.content {
width: 546px;
border: 2px solid #4e6ef2;
border-radius: 10px 0 0 0;
display: none;
}
/* Style of each content */
.search-container li {
padding: 2px 8px;
cursor: pointer;
}
.search-container li:hover {
background-color: aquamarine;
}
Copy the codeThe end result is to implement a static page like this:
❝
Note that our search prompt box is hidden by default.
❞
JavaScript code
Instead of using native JavaScript, a third-party library called jQuery has been introduced.
The import code is shown below
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
Copy the codeSomebody else Baidu’s prompt box has a lot of data in the back support, making the prompt box gray often powerful. Here we do not have baidu data, we create a.json file, the file is used for asynchronous prompt box.
The contents of the. Json file are as follows
[{
"name": "java".
"value": [
"java"."javascript"."The Definitive Guide to javascript"."Advanced Programming in javascript"
]
}, {
"name": "jQuery".
"value": [
"jQuery"."jQuery Ajax"
]
}]
Copy the code“The first step“: binds to our search boxinputEvent that is fired when the contents of our search box have been modified. The specific implementation steps are as follows
- Bind to the search box
inputEvents. - Clear the original search prompt box
- Gets the contents of the search box
- To obtain
.jsonContents of the file - Since the JSON file we get starts as an array of two objects, we need to first iterate through the array to get the value of its name
- Determines whether the contents of the search box are in the value of name, and then iterates over the value of value, appending it to
<ul>中
The sample code looks like this:
$('#serach').on('input'.function () {
// Clear the related data
$('.content>ul').empty()
// 1. Dynamically obtain relevant prompt data according to the content entered by the user
var inputValue = $(this).val();
$.getJSON('data/data_serach.json'.function (data) {
$.each(data, function (index, obj) {
var name = obj.name;
// Return the index value
if (name.indexOf(inputValue) >= 0) {
var value = obj.value;
$.each(value, function (index, text) {
$('.content>ul').append($('<li>' + text + '</li>'))
});
}
});
});
// 2. Turn the prompt dialog box into reality
$('.content').css('display'.'block')
})
Copy the code“The second step“: selected by us<li>To replace the text content in the search box. The specific implementation steps are as follows:
- The binding
clickThe event - To obtain
<li>Text content of - Replaces the text content of the search box
- Changes the search prompt box to disappear
“Problem encountered” : binding events to
The implementation code is as follows:
$('.content ul').click(function (event) {
var text = $(event.target).text()
$('#serach').val(text);
$('.content').css('display'.'none')
})
Copy the code“The third step“: Hides the search prompt box when the search box loses focus
“Problem encountered” : When we directly bind the blur event to it, the function of the previous step is directly invalid due to the different execution order. The screenshot of the problem is as follows:
Solution: Since our search box and prompt box have a common container, we bind mouseover and Mouseout events to that container, and the hidden prompt box only executes when the mouse moves outside of our container.
The implementation code is as follows:
var flag = false // Indicates whether the mouse is inside the input box
$('.search-container').on('mouseover'.function () {
flag = false
}).on('mouseout'.function () {
flag = true // Move the mouse away from the search container and set it to true
})
$('#serach').on('blur'.function () {
if (flag) {
// Hide the search prompt box when the input loses focus and the mouse is in the non-search container
$('.content').css('display'.'none')
}
})
Copy the code“The last step“: The search function is complete
- Bind buttons
clickThe event - Modify the
<a>的hrefTo enable it to jump successfully
The implementation code is shown below
var $serachBtn = $('#serachBtn')
$serachBtn.click(function () {
var inputValue = $('#serach').val();
$Copy the code