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
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
1664
14
1423
52
1321
25
1269
29
1249
24
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
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
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
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 "
It is reported that the Chinese version of Samsung Galaxy S24 series mobile phone 'Search in Circle” will support Google search
Jun 01, 2024 am 09:54 AM
According to news on May 31, blogger @ibinguniverse broke the news today that the Chinese version of Samsung Galaxy S24 series mobile phones will support Google search. The blogger did not disclose the specific launch time. According to Samsung’s previous introduction, the Samsung Galaxy S24 series has been equipped with many high-level AI capabilities, AI-based practical functions such as input, translation, recorder, notes, and cameras, to provide users with a more convenient and efficient comprehensive experience. Different from the overseas version, most of the AI functions of the Samsung Galaxy S24 series are provided by domestic manufacturers, such as Baidu. Previously reported, Galaxy AI deeply integrates multiple capabilities of Baidu Wenxin large model, which can provide end-side enabled call and translation functions, as well as intelligent summary brought by generative AI.
Baidu Wenxin Big Model 4.0 Turbo is open to enterprises, with a price reduction of 70% compared to the general version of Wenxin Yiyan 4.0
Jul 11, 2024 pm 07:14 PM
According to news from this site on July 5, Baidu released the new Wenxin Large Model 4.0 Turbo version at the WAVESUMMIT Deep Learning Developer Conference on June 28. Compared with Wenxin large model version 4.0, Turbo has faster response speed and stronger retrieval capabilities. At today’s 2024 World Artificial Intelligence Conference, Baidu Vice President Xie Guangjun said that Wenxinyiyan 4.0 Turbo has officially been fully opened to enterprises. The pricing is 0.03 yuan/thousand Tokens for input and 0.06 yuan/thousand Tokens for output. “If according to 3: 1 Based on the input and output length statistics, the price reduction of the general version of Wenxin Yiyan 4.0 is 70%. "Baidu said that based on the powerful basic large model, the Wenxin large model further creates innovations.
