Bootrap+Vue implements Baidu search interface function imitation
This time I will bring you Bootrap Vue to implement the function of imitating Baidu search interface. What are the precautions for Bootrap Vue to implement the function of imitating Baidu search interface. The following is a practical case, let’s take a look.
Use Vue to call Baidu’s search interface to implement a simple search function.
The style of the search box is based on Bootstrap. Of course, the style has been simply adjusted to make it similar to Baidu search. The code is as follows
nbsp;html>
<meta>
<title>百度搜索</title>
<style>
.gray{
background-color: #eee;
}
.listyle{
font-size: 16px;
line-height: 35px;
padding-left: 16px;
}
.ulstyle{
border:1px solid #ccc;
border-top: none;
}
</style>
<link>
<script></script>
<script></script>
<script>
window.onload = function(){
new Vue({
el: ".container",
data: {
myData:[],
txt:"",
nowIndex:-1
},
methods:{
get:function(event){
if(event.keyCode==38 || event.keyCode==40){
return;
}
if(event.keyCode==13){
window.open("https://www.baidu.com/s?wd="+this.txt);
this.txt="";
}
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd:this.txt
},{
jsonp:"cb"
}).then(function(res){
this.myData=res.data.s
},function(res){
alert(res.status);
});
},
changeDown:function(){
this.nowIndex++;
if(this.nowIndex==this.myData.length){
this.nowIndex=0;
this.txt=this.myData[0];
}else{
this.txt=this.myData[this.nowIndex];
}
},
changeUp:function(){
this.nowIndex--;
if(this.nowIndex==-1){
this.nowIndex=this.myData.length-1;
this.txt=this.myData[this.nowIndex];
}else{
this.txt=this.myData[this.nowIndex];
}
},
mouseOver:function(n){
this.nowIndex=n;
this.txt=this.myData[this.nowIndex];
},
getMsg:function(){
window.open("https://www.baidu.com/s?wd="+this.txt);
this.txt="";
}
}
});
}
</script>
<br>
<p>
</p><p>
<input>
<span>
<button>搜索</button>
</span>
</p>
- {{item}}
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of AFN encapsulated network requests
##Detailed explanation of the use of Node.js environment variable process.env
Detailed explanation of the use of exports and module.exports of node.js and ES6
The above is the detailed content of Bootrap+Vue implements Baidu search interface function imitation. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1657
14
1415
52
1309
25
1257
29
1229
24
How to remove news and trending content from Windows 11 Search
Oct 16, 2023 pm 08:13 PM
When you click the search field in Windows 11, the search interface automatically expands. It displays a list of recent programs on the left and web content on the right. Microsoft displays news and trending content there. Today's check promotes Bing's new DALL-E3 image generation feature, the "Chat Dragons with Bing" offer, more information about dragons, top news from the Web section, game recommendations, and the Trending Search section. The entire list of items is independent of your activity on your computer. While some users may appreciate the ability to view news, all of this is abundantly available elsewhere. Others may directly or indirectly classify it as promotion or even advertising. Microsoft uses interfaces to promote its own content,
How to use Baidu advanced search
Feb 22, 2024 am 11:09 AM
How to use Baidu Advanced Search Baidu search engine is currently one of the most commonly used search engines in China. It provides a wealth of search functions, one of which is advanced search. Advanced search can help users search for the information they need more accurately and improve search efficiency. So, how to use Baidu advanced search? The first step is to open the Baidu search engine homepage. First, we need to open Baidu’s official website, which is www.baidu.com. This is the entrance to Baidu search. In the second step, click the Advanced Search button. On the right side of the Baidu search box, there is
How to search for users in Xianyu
Feb 24, 2024 am 11:25 AM
How does Xianyu search for users? In the software Xianyu, we can directly find the users we want to communicate with in the software. But I don’t know how to search for users. Just view it among the users after searching. Next is the introduction that the editor brings to users about how to search for users. If you are interested, come and take a look! How to search for users in Xianyu? Answer: View details among the searched users. Introduction: 1. Enter the software and click on the search box. 2. Enter the user name and click Search. 3. Select [User] under the search box to find the corresponding user.
WPS table cannot find the data you are searching for, please check the search option location
Mar 19, 2024 pm 10:13 PM
In the era dominated by intelligence, office software has also become popular, and Wps forms are adopted by the majority of office workers due to their flexibility. At work, we are required not only to learn simple form making and text entry, but also to master more operational skills in order to complete the tasks in actual work. Reports with data and using forms are more convenient, clear and accurate. The lesson we bring to you today is: The WPS table cannot find the data you are searching for. Why please check the search option location? 1. First select the Excel table and double-click to open it. Then in this interface, select all cells. 2. Then in this interface, click the "Edit" option in "File" in the top toolbar. 3. Secondly, in this interface, click "
How to search a directory with a specific file extension in Java?
Aug 31, 2023 am 08:13 AM
The following example prints files in a directory based on their extension - Example importjava.io.IOException;importjava.nio.file.Files;importjava.nio.file.Path;importjava.nio.file.Paths;importjava.util.stream.Stream; publicclassDemo{ publicstaticvoidmain(String[]args)throwsIOException{ 
How to search for stores on mobile Taobao How to search for store names
Mar 13, 2024 am 11:00 AM
The mobile Taobao app software provides a lot of good products. You can buy them anytime and anywhere, and everything is genuine. The price tag of each product is clear. There are no complicated operations at all, making you enjoy more convenient shopping. . You can search and purchase freely as you like. The product sections of different categories are all open. Add your personal delivery address and contact number to facilitate the courier company to contact you, and check the latest logistics trends in real time. Then some new users are using it for the first time. If you don’t know how to search for products, of course you only need to enter keywords in the search bar to find all the product results. You can’t stop shopping freely. Now the editor will provide detailed online methods for mobile Taobao users to search for store names. 1. First open the Taobao app on your mobile phone,
What should I do if the word interface becomes smaller?
Mar 20, 2024 pm 09:30 PM
When we use computers to edit word documents, we often don't know where we touched, and the interface suddenly becomes very small. Sometimes the text in the word document cannot be seen clearly. Some people may panic when encountering such a problem, thinking that the computer is malfunctioning. In fact, it is just because you have encountered a certain setting and adjusted the display. So, if you accidentally change the size of the interface display, how should you restore and adjust it? What should I do if the word interface becomes smaller? Below, we will share several ways to solve it. I hope you can easily deal with it when you encounter such a problem. First, we create and open a Word document and perform simple editing operations to show the steps. In the picture below
How to use hash search algorithm in C++
Sep 19, 2023 pm 02:49 PM
How to use the hash search algorithm in C++ The hash search algorithm is an efficient search and storage technology. It converts keywords into a fixed-length index through a hash function, and then uses this index in the data structure Search. In C++, we can implement hash search algorithms by using hash containers and hash functions from the standard library. This article will introduce how to use the hash search algorithm in C++ and provide specific code examples. Introducing header files and namespaces First, before using the hash search algorithm in C++
