5 years ago (2015-12-30)  Algorithm language Technical application |   First to comment  15 
post score 0 times, average 0.0

After using the online open-source navigation station source code to create my navigation page "hundred yuan navigation", I always feel that it lost a very important thing in the navigation site - the search box.So the extremely guest has added the function of the search box for their navigation station, supports Baidu search, good search, geek search, CSDN search, dandelion PT search, etc. (can easily increase the code expansion), in addition to the site interface using the online code, The js code of the logic processing part is entirely realized by me. Search Box with Search Tips

Html code:

The following is the html part of the search box interface, CSS is not posted below, if you need to leave a message:

Javascript code

To think of the search box as supporting multi-search engine switching, you first need to grasp the URL parameters of the search engine's search keywords, and check that there are several GET parameters (search engines generally use GET values). For example, the following is the search engine search for Wang Baiyuan’s The URL of the blog's results page: https://www.baidu.com/s?ie=UTF-8&wd=%E7%8E%8B%E6%9F%8F%E5%85%83 ?Ie followed by the encoding format, wd is followed by the URLEncode encoding of the searched keyword. So just make a form, add the name="ie" DOM ​​element inside the form, this element is not necessary to display in the interface, you can add "display:none" in the CSS style, the following addparams function is to achieve this function ; Then add the name="wd" text box, which is the search box for the keyword.Finally set the action of the form to Baidu search keyword URL: https://www.baidu.com/s The following setEngine function is to switch the search engine function.Incoming searchIndex is the value of option in the html select;

In order to open the navigation page again after the user switches the search engine, the search engine after switching is displayed by default, and a cookie may be used to record searchIndex.

The following code is used to automatically search the search box keywords if the search box is not empty when switching the search engine, without clicking the "search button".

Search Box Add Baidu Search Auto Tips

Among them, the automatic search function uses Baidu's open Baidu search box. Tip: Introduce a Baidu openug.js file, and then add baiduSug="1" to the input element of the text box to be bound to the search prompt.This allows you to get the same search tips as Baidu by entering text in the bound search box. such as:

There are many high-level usages for Baidu search prompts on the Internet, such as the background color of custom search hints, fonts, and so on.However, the guests did not support the discovery, you can try on their own, and welcome to Wang Boyuan's blog exchange!


This article has been printed on copyright and is protected by copyright laws. It must not be reproduced without permission.If you need to reprint, please contact the author or visit the copyright to obtain the authorization. If you feel that this article is useful to you, you can click the "Sponsoring Author" below to call the author!

Reprinted Note Source: Baiyuan's Blog>>https://wangbaiyuan.cn/en/mul-engine-auto-prompt-search-box-2.html

Post comment


No Comment


Forget password?