【 introduction 】
Before we get to that, you probably know a little bit about search engines, which are basically what you do when you type text into a box in your browser, and it displays some results, and you click on what you think matches what you’re searching for.
I. Project Preparation
Browser: 360 browser
Editor: Sublime Text 3
Plug-in: Jquery – 3.2.1. Min. Js
【 II. Project Realization 】
Because it is to implement a web search engine, so we need to borrow the web three muskers (Html+Css+Javascript), and then implement this function.
1. Open Baidu to analyze the web page structure
We can start by looking at baidu’s search engine:
As you can see, some of the Settings for the search box, such as turning off autocomplete. Then we randomly search the content to see how it changes:
We can see some of the keywords of our query, so we can see the pattern of requests:
https://www.baidu.com/s?+ Query character parametersCopy the codeThis makes up our entire GET request, and there are a lot of keyword arguments that can be omitted, just the important ones. Therefore, after the test, the following conclusions are drawn:
https://www.baidu.com/s?wd=keyword
Copy the codeThis is the interface address of the request. Simply replace the keyword parameter with any search keyword to implement the query and jump to the corresponding result page.
2. Write Html input box and search button
After reading the Html series I wrote earlier, you will no longer be confused about this.
< HTML >< head> <title></title> <style type="text/ CSS "> *{margin:0; padding:0 } input{ width:300px; height:30px } span{ position:absolute; Background-color :red; Border :1px solid gray; Width :60px; height:32px; </style> </head> <body> <input type="text" name="" Placeholder =" Please input what you want to search for "> textbox <span>search</span> search button </body> </ HTML >Copy the codeAfter compiling, enter the browser to check, you can see:
As you can see, it’s starting to look like a browser search box.
3. Import the Jquery plug-in
< script SRC = "jquery - 3.2.1. Min. Js" > < / script >Copy the code4. Write JS scripts
Open your browser, Network, and continue your analysis:
You can see the search results in there. Then open the URL address of this request. After several experiments, only the marked parameters in the figure are found to change:
So we can conclude that we just need to change these two values.
1). Create a delete script
So I first create a script tag, when not using it can be cleared at any time, to avoid memory, resulting in a slow page opening, performance degradation:
var script=document.createElement('script'); Id ='jsonp'; Set the id to the json script. SRC = 'https://www.baidu.com/sugrec?prod=pc&cb=getData&wd=' + wd; Set the address document. The body. The appendChild (script). Add a script element to the bodyCopy the codeThen, when it is no longer used, delete it at any time:
var script=document.createElement('script'); Id ='jsonp'; Set the id to the json script. SRC = 'https://www.baidu.com/sugrec?prod=pc&cb=getData&wd=' + wd; Set the address document. The body. The appendChild (script). Add a script element to the bodyCopy the code2). Generate drop-down menu of options
We can see in the browser that as soon as we type in text, it will bring up the corresponding option for us to select, so how does this work?
<script> function getList (wd){/* get the list */ var script=document.createElement('script'); /* Create script tag */ script.id='jsonp'; / * set the id to the json * / script SRC = "https://www.baidu.com/sugrec?prod=pc&cb=getData&wd=" + wd; / * set its address * / document in the body. The appendChild (script). Function getData(data){/* getData */ var script=document.querySelector('#jsonp'); / * select the id for the json element * / script. ParentNode. RemoveChild (script). $('ol').html(''); /* Set the ordered list to null */ var da=data.g; / / forEach(function(item,index){$('<li><a target="_blank" href){$('<li><a target="_blank" href) ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol'); }}}) / * determine whether keyboard press * / $(' input: text) keyup (function () {var wd = $(this). Val (); / * * / if the value of the input box (wd = = ' ') {/ * if the value is empty, it is hidden, or display * / $(' ol '). The CSS (' display ', 'none'); $('ol').css('zIndex',-10); }else{ $('ol').css('display','block'); $('ol').css('zIndex',20); } getlist(wd); }); </script>Copy the codeAs you can see, the search results have been generated, and the “Li” tags in the ordered list have been generated.
3). Mark the sequence of options
As you can see, the results are finally coming in, but I want to give it a serial number, so I know how many results there are. There are many different notations to set, starting with a number, upper and lower case letters, or Roman time. I’m going to pick numbers here. It’s easy.
Finally very perfect implementation of this function, is not very amazing, go to try it.
4). Search refresh
See here I believe you should know that this function is completed, we just need to click any li tag can access the corresponding page. So I decided to add a refresh feature, of the sort that reconnects the server:
<span onclick='window.location.reload()'>search</span> Refresh immediately after clickingCopy the codeIii. Project Summary
In general, for beginners xiao Bai is a very good practice project, I hope we can gain something from it.
Need source buddy, background reply “search engine” four words can be obtained.
Have you learned anything after reading this article? Please share it with more people
Home of IT Sharing
Please reply in wechat background [Join group]
——————- End ——————-
Previous wonderful articles recommended:
-
This article will teach you how to grab tiktok app hotspot data in Python
-
This article will teach you how to use Python to regularly capture twitter comments
-
Use Python to fetch QQ music data
Learn more about Crawlers and data mining in Python at pdcfighting.com/