jquery implements a search box similar to Baidu
As a developer, the search box is also an indispensable function when developing a website. Recently, I need to make a search box at work, similar to Baidu’s search box. In this article, we will share with you about the Jquery implementation of similar Baidu search box.
Need to achieve two functions:
1. Enter keywords and display the matching drop-down list
2. Select the matching item and find related content
This search bar is often used in general e-commerce websites. First, analyze the function implementation. Enter the keyword and immediately display the list of matching items. To implement this function, the input box needs to bind the "input" event, and then send an asynchronous request to the background. The data is displayed on the page. Use the mouse or the up and down keys to select matching items, and click Search or the "Enter" key to search for specific results. Two asynchronous requests are used here, the first requests the matching items, and the second requests the search results. Keyboard, mouse and input box events must be monitored. Flexibility must also be considered, that is, adapting to various similar needs. It is still difficult to do it well. The implementation is distributed as follows.
1.html and css
<body>
<div id="search-form"></div>
</body>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;border:none;}
body {
font-family: "microsoft yahei" !important;
background-color: #FDFFE0;
}
:focus {
outline: none;
}
#search-form {
position: relative;
top: 50px;
display: inline;
}
</style>2. Import css and js files
Since the blog cannot upload files, you can go to my git: http://git.oschina There is a complete project file on .net/manliu.com/search_frame
3. Page reference js
<script type="text/javascript">
var proposals = ['百度1', '百度2', '百度3', '百度4', '百度5', '百度6', '百度7','17素材网','百度','新浪'];
$(document).ready(function(){
$('#search-form').complete({
searchIn:function(val){//传入输入值，返回匹配值
/* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
return reg.test(val); */
var word = "^"+val+".*";
var rs = [];
$.each(proposals,function(i,n){
if(n.match(word)){
rs.push(n);
}
});
return rs;
},
width:400,
height: 30,
submitIn: function(text){//搜索选定的值
alert(text);
}
});
});
</script>The searchIn method here is used to return matching items, usually defining an asynchronous request inside, to The data is fetched in the background and an array is returned. For complex ones, the source code needs to be modified; submitIn is used to search for matching results, and generally can be requested asynchronously or synchronously.
The above content is a tutorial on query to implement a search box similar to Baidu. I hope it can help everyone.
Related recommendations:
Css to create a good-looking search box
How to use Js to implement the Baidu search box prompt function
JavaScript implements imitation Youku search box
The above is the detailed content of jquery implements a search box similar to Baidu. 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
AI Hentai Generator
Generate AI Hentai for free.
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
After 2 months, the humanoid robot Walker S can fold clothes
Apr 03, 2024 am 08:01 AM
Editor of Machine Power Report: Wu Xin The domestic version of the humanoid robot + large model team completed the operation task of complex flexible materials such as folding clothes for the first time. With the unveiling of Figure01, which integrates OpenAI's multi-modal large model, the related progress of domestic peers has been attracting attention. Just yesterday, UBTECH, China's "number one humanoid robot stock", released the first demo of the humanoid robot WalkerS that is deeply integrated with Baidu Wenxin's large model, showing some interesting new features. Now, WalkerS, blessed by Baidu Wenxin’s large model capabilities, looks like this. Like Figure01, WalkerS does not move around, but stands behind a desk to complete a series of tasks. It can follow human commands and fold clothes
deepseek web version entrance deepseek official website entrance
Feb 19, 2025 pm 04:54 PM
DeepSeek is a powerful intelligent search and analysis tool that provides two access methods: web version and official website. The web version is convenient and efficient, and can be used without installation; the official website provides comprehensive product information, download resources and support services. Whether individuals or corporate users, they can easily obtain and analyze massive data through DeepSeek to improve work efficiency, assist decision-making and promote innovation.
Introduction to how to obtain Baidu Xiyang Shells
Mar 28, 2024 am 09:11 AM
There are many users in Xirang who don’t know where the shells are and how to get them. Some players have been searching for several hours but still can’t find them. Below, the editor will introduce how to obtain Baidu Xirang shells. Come and take a look. . How to get Baidu Xirang Shell 1. First we need to come to the community, and then come to the location in the picture below. 2. Select the destination here and choose to enter the 188th floor. 3. After entering the 188th floor, you will see this prompt when walking around. Just click I Got It. 4. The location of the shell may be a little difficult to find. Just behind the 188 elevator, there is a small glowing dot that is the shell. 5. You need to use a VR controller to pick up shells. Just click on the shell. Redemption method 1. First click the "Settings" icon in the upper right corner of the page and select "
Baidu Apollo releases Apollo ADFM, the world's first large model that supports L4 autonomous driving
Jun 04, 2024 pm 08:01 PM
On May 15, Baidu Apollo held Apollo Day 2024 in Wuhan Baidu Luobo Automobile Robot Zhixing Valley, comprehensively demonstrating Baidu's major progress in autonomous driving over the past ten years, bringing technological leaps based on large models and a new definition of passenger safety. With the world's largest autonomous vehicle operation network, Baidu has made autonomous driving safer than human driving. Thanks to this, safer, more comfortable, green and low-carbon travel methods are turning from ideal to reality. Wang Yunpeng, vice president of Baidu Group and president of the Intelligent Driving Business Group, said on the spot: "Our original intention to build autonomous vehicles is to satisfy people's growing yearning for better travel. People's satisfaction is our driving force. Because safety, So beautiful, we are happy to see
What is the Excel search shortcut key?
Mar 20, 2024 am 10:52 AM
Want to know what the Excel search shortcut key is? The answer is simple, just use [Ctrl+F] to perform a quick search. We often use Excel to record a lot of different data and names. If we need to change it, it will be inconvenient for us to search because there is too much data, and it will be quite troublesome to search. In fact, we can use a quick search shortcut to find the data we need to change! So, what is the search shortcut key in Excel? Today I’m going to teach you how to use the shortcut search keys in excel tables to save you time and effort in your work. Here I am using this version of Microsoft Office excel 2010 for demonstration. Students who need it can
How to search other people's resources on Alibaba Cloud Disk
Mar 30, 2024 am 10:31 AM
Alibaba Cloud Disk, this popular storage tool, not only helps us manage personal resources efficiently, but also provides many convenient functions. So many users may not be able to find cloud disk resources when searching, so they want to search all resources in the entire disk. So below, the editor of this site will answer this question in detail and share the specific search method. Users who want to know, please come and follow this article to learn more! How to search other people's resources in Alibaba Cloud Disk 1. First, search the specific path of the resource file in the folder directory of Alibaba Cloud Disk to find the corresponding folder. 2. Then use the file search function and enter the keywords you want to find to find the relevant file content. 3. Then we share the link with others to directly locate and download
Baidu Robin Li led a team to visit PetroChina to discuss the intelligence of the oil and gas industry
May 07, 2024 pm 06:13 PM
According to news from this site on May 7, on May 6, Robin Li, founder, chairman and CEO of Baidu, led a team to visit China National Petroleum Corporation (hereinafter referred to as "PetroChina") in Beijing and met with directors of China National Petroleum Corporation Chairman and Party Secretary Dai Houliang held talks. The two parties had in-depth exchanges on strengthening cooperation and promoting the deep integration of the energy industry with digital intelligence. PetroChina will accelerate the construction of a digital China Petroleum Corporation, strengthen cooperation with Baidu Group, promote the in-depth integration of the energy industry with digital intelligence, and make greater contributions to ensuring national energy security. Robin Li said that the "intelligent emergence" and core capabilities of understanding, generation, logic, and memory displayed by large models have opened up a broader space for imagination for the combination of cutting-edge technology and oil and gas business. Always
How to search for people nearby on NetEase Cloud_How to search for people nearby on NetEase Cloud
Mar 25, 2024 pm 02:41 PM
1. Open the NetEase Cloud Music app, click My at the bottom, and click the personal information bar at the top. 2. Click on your following. 3. On the follow page, click [More Users] at the bottom of the page. 4. Click [Nearby People] to enter. Note: This article takes Huawei mate40pro mobile phone as an example, and is suitable for EMUI11 system, NetEase Cloud Music V8.0.00 version and other Android phones.
