Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about how to achieve the intelligent search box in JavaScript. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Html part

Intelligent search box

Search

Css part

Html

Body

Div {

Margin: 0

Padding: 0

}

Ul

Li {

List-style: none

Margin: 0

Padding: 0

}

Li {

Border: 1px solid # ccc

Width: 500px

Padding: 2px 1px

Text-indent: 1rem

}

Li:hover {

Background-color: # efebeb

}

Li b {

Color: # f00

}

.search {

Width: 600px

Margin: 5% auto

}

Input {

Width: 500px

Height: 30px

Font-size: 1.1rem

Text-indent: 1rem

}

Button {

Font-size: 1.1rem

Margin-left: 10px

Width: 60px

Height: 35px

}

JavaScript part

/ *

* * date:2021.12.20

* * name:@ front-end rookie?

, /

/ / 1.2 analyze the data structure

Var arr= [

"Wei was fined 1.341 billion for tax evasion."

"the trajectory of newly confirmed cases in Yan'an is announced."

The 22nd Anniversary of Macao's return to the motherland

"the hammer of the god of the bud vs the power of great panic, please look forward to the outcome."

"I wonder if Wang Feng and Wang Banbi are going to have a concert again."

"the crazy rice circle behind Wu Moufan at the end of the day."

"the Global Times commented that Wang Mouhong must be cool."

]

/ / 2.0 feature entry

Var inputStr=document.querySelector (".search-input")

Var strUl=document.querySelector (".search-result")

Var btn=document.querySelector (".btn")

InputStr.oninput=function () {

/ / 2.0

If (this.value.length==0) {

StrUlf [XSS _ clean] = ""

Return

}

/ / 2.1 get the value of the input box

Var keywords=this.value

/ / 2.2 eliminate spaces on both sides

Keywords=keywords.trim ()

/ / 2.3 eliminate intermediate spaces

Keywords=trimAll (keywords)

/ / 2.4 split keyword

Var keysArr = keywords.split ("")

/ / 2.5 keyword deduplication

KeysArr=removeRepetition (keysArr)

/ / 2.6 match results from data source

Var resultsAll=matching (keysArr,arr)

/ / 2.7 rendering

Renders (resultsAll,strUl)

For (let I = 0; I

< resultsAll.length; i++) { let list=document.querySelectorAll(".search-result>

Li ")

List [I] .addEventListener ("click", function () {

Var URL= "http://www.baidu.com/s?ie=UTF-8&wd=";

If (list [I] [xss_clean] = "") {

_ window.location.href=URL

} else {

URL= "http://www.baidu.com/s?ie=UTF-8&wd="+ list [I] [xss_clean]

Console.log (list)

_ window.location.href=URL

}

});

}

}

/ / 2.8 Click to search

Btn.addEventListener ("click", skip)

/ / tool function

/ / eliminate the middle space

Function trimAll (_ keywords) {

For (let iTuno; _ keywords.indexOf ("")! =-1; iTunes +) {

_ keywords = _ keywords.replace ("", ")

}

Return _ keywords

}

/ / eliminate keyword duplication

Function removeRepetition (_ keysAll) {

Var iteam= []

For (let I = 0; I < _ keysAll.length; iTunes +) {

If (iteam.indexOf (_ keysall [I]) =-1) {

Iteam.push (_ keysall [I])

}

}

Return iteam

}

/ / match result

Function matching (_ keysAll,_arr) {

Var iteam= []

For (let I = 0; I < arr.length; iTunes +) {

Var flag=true

For (let j = 0; j < _ keysAll.length; jacks +) {

If (! _ arr [I]. Salary (_ keysall [j])) {

Flag=false

Break

}

}

If (flag) {

Iteam.push (_ arr [I])

}

}

Return iteam

}

/ / render

Function renders (_ resultsAll,_strUL) {

_ strul [XSS _ clean] = ""

For (let I = 0; I < _ resultsAll.length; iTunes +) {

Var iteamLi=document.createElement ("li")

IteamLi [XSS _ clean] = _ resultsall [I]

_ strUL.appendChild (iteamLi)

}

}

/ / pick and turn

Function skip () {

Var URL= "http://www.baidu.com/s?ie=UTF-8&wd=";

If (str[ XSS _ clean] = "") {

_ window.location.href=URL

} else {

URL= "http://www.baidu.com/s?ie=UTF-8&wd="+strUl[xss_clean];

_ window.location.href=URL

}

}

These are all the contents of the article "how to realize the Intelligent search Box in JavaScript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.