<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: max-content;
}
input {
outline: none;
border: 1px solid;
}
ul {
box-sizing: border-box;
list-style: none;
border: 1px solid;
margin: 0;
padding: 0;
border-top: 0;
/* display: none; */
}
ul li.selected {
background-color: #aaa;
}
</style>
</head>
<body>
<form action="https://www.baidu.com/s">
<div>
<input type="text" name="wd">
<ul></ul>
</div>
</form>
<script>
var input = document.querySelector('input')
var ul = document.querySelector('ul')
var selectedSuggestionIndex = -1
var showTimeOver = 0//已经显示的内容的输入时间
// input.addEventListener('mousedown',e => {
// if(e.target.matches('li, li*'))
// input.value = e.target.textContent
// }
// )
input.addEventListener('input', e => {
var text = input.value.trim()//获取到当前输入框的信息
showSuggestions(text)
}
)
//显示联想内容
function showSuggestions(text) {
if(!text){
return []
}
// var suggestions = getSuggestions(text)//将文本内容传入到这个获取信息的方法中
// ul.innerHTML=suggestions.map(it => {
// return `<li>${it}</li>`
// }).join('')
var inputTime = Date.now()//text的输入时间
if(inputTime > showTimeOver) {
getSuggestions(text,(suggestions) => {
ul.innerHTML=suggestions.map(it => {
return `<li>${it}</li>`
}).join('')
})
}
}
function getSuggestions2(keyword) {
var s = []
for(var i = 0; i <10; i++){
s.push(keyword + Math.random().toString().slice(2,8))
}
return s
}
function getSuggestions3(keyword,callback) {
var s = []
for(var i = 0; i <10; i++){
s.push(keyword + Math.random().toString().slice(2,8))
}
setTimeout(() => {
callback(s)
},50 + 100 * Math.random())
}
function getSuggestions(keyword,callback) {
function f(data) {
callback( data.g?.map(it=>it.q) ?? [])
}
var fname = 'fun' + Date.now()
window[fname] = f
var url = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36561,39027,39024,38943,38882,38796,38957,38956,38984,39016,38964,38917,38816,38987,38639,26350,38570,22157&wd=${keyword}&req=2&bs=a&csor=2&cb=${fname}&_=1688610272429`
var script = document.createElement('script')
script.src = url
script.onload = () => {
delete window[fname]
}
document.body.append(script)
}
//点击下拉框的某个选项,会选中到input框中显示出来
ul.addEventListener('mousedown',e => {
if(e.target.matches('li')) {
input.value = e.target.textContent
// showSuggestions(input.value)
input.form.submit()
}
})
//上下键_高亮
input.addEventListener('keydown',e => {
if(e.key == 'ArrowDown'){
e.preventDefault()
selectedSuggestionIndex++//在这块加了1 之后判断是否等于长度的,比如此时下标是9 加1 是10 此时与长度相等则下一个下标则是第一个 也就是0
if(selectedSuggestionIndex == ul.children.length){
selectedSuggestionIndex = 0
}
highLight()
input.value = ul.children[selectedSuggestionIndex].textContent
}
if(e.key == 'ArrowUp') {
e.preventDefault()
selectedSuggestionIndex--
if(selectedSuggestionIndex == -1){
selectedSuggestionIndex = ul.children.length - 1
}
highLight()
input.value = ul.children[selectedSuggestionIndex].textContent
}
if(e.key == 'Enter') {
input.value = ul.children[selectedSuggestionIndex].textContent
showSuggestions(input.value)
selectedSuggestionIndex = -1
}
})
function highLight() {
if(selectedSuggestionIndex >= 0) {
//取消之前的元素高亮
ul.querySelector('.selected')?.classList.remove('selected')
//使当前元素高亮
ul.children[selectedSuggestionIndex].classList.add('selected')
}
}
input.addEventListener('focus', e => {
// showSuggestions(input.value)
ul.style.display = 'block'
})
input.addEventListener('blur',e => {
ul.style.display = "none"
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
