js仿百度搜索框
1.js仿百度搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show(json){
let oUl=document.getElementById('ul1');
oUl.innerHTML='';
json.s.forEach(str=>{
let oLi=document.createElement('li');
oLi.innerHTML=str;
oUl.appendChild(oLi);
})
}
</script>
<script>
window.onload=function(){
let oTxt=document.getElementById('txt1');
let oUl=document.getElementById('ul1'); oTxt.oninput=function(){
let oS=document.createElement('script');
oS.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`;
document.head.appendChild(oS);
}
}
</script>
</head>
<body>
<input type="text" id="txt1">
<ul id="ul1"> </ul>
</body>
</html>
2.jq仿百度搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.js">
</script>
<script>
$(function(){
$('#txt1').on('input',function(){
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{wd:$('#txt1').val()},
dataType:'jsonp',
jsonp:'cb',
success(json){
$('#ul1').html('');
json.s.forEach(str=>{
$(`<li>${str}</li>`).appendTo($('#ul1'));
})
},
error(){
alert('错了')
}
})
})
})
</script>
</head>
<body>
<input type="text" id="txt1">
<ul id="ul1"> </ul>
</body>
</html>
js仿百度搜索框的更多相关文章
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
- js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
- 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- JS---DOM---案例：模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
随机推荐
- 2023-07-09：给定N、M两个参数， 一共有N个格子，每个格子可以涂上一种颜色，颜色在M种里选， 当涂满N个格子，并且M种颜色都使用了，叫一种有效方法。 求一共有多少种有效方法。 1 ＜= N,
2023-07-09:给定N.M两个参数, 一共有N个格子,每个格子可以涂上一种颜色,颜色在M种里选, 当涂满N个格子,并且M种颜色都使用了,叫一种有效方法. 求一共有多少种有效方法. 1 <= ...
- bitfield
bitfield 作用 位域修改 溢出控制 原理 通过对redis字符串二进制形式进行操作,通过改变其值的作用 更具体 将一个Redis字符串看作是一个由二进制位组成的数组. 并能对变长位宽和任意没有 ...
- DolphinScheduler3.1.7离线手册
DolphinScheduler3.1.7 DolphinScheduler简介 Apache DolphinScheduler 是一个分布式易扩展的可视化DAG工作流任务调度开源系统.适用于企业级场 ...
- minipc安装与设置Ubuntu
此文章是对刚刚在某宝买的minipc进行的Ubuntu server安装,以及部分应用过程 安装Ubuntu server22 参考一文搞懂Ubuntu Server 22.04.2安装 问题记录 开 ...
- 模型部署 — PaddleNLP 基于 Paddle Serving 快速使用（服务化部署 - Docker）— 图像识别 + 信息抽取(UIE-X)
目录 流程 版本 安装 Docker 安装 PaddleNLP 安装 环境准备 模型准备 压缩模型 下载模型 模型部署 环境配置 启动服务 测试 -- 暂时还没通过 重启 图像识别 + 信息抽取(UI ...
- wireshark 怎么过滤字符串 和 复制data中的可读文本
设置 首先点击,[捕获]下面的小放大镜 选择 分组字节流 - 窄(UTF-8/ASCII)- 字符串 (注意,要向选择字符串) 效果 复制报文中的可读数据 右键报文,复制,...as Printabl ...
- 一文搞懂TCP的三次握手和四次挥手
目录 1.三次握手 2.四次挥手 3.11种状态名词解析 TCP的三次握手和四次挥手实质就是TCP通信的连接和断开. 三次握手:为了对每次发送的数据量进行跟踪与协商,确保数据段的发送和接收同步,根据所 ...
- searchsploit用法
kali里面自带这个工具,用来搜索www.exploit-db.com上面的漏洞库,在由于是提前内置了数据库所以不联网也可以用. 使用之前先更新一下确保是最新的漏洞库 searchsploit --u ...
- Cilium系列-14-Cilium NetworkPolicy 简介
系列文章 Cilium 系列文章 前言 今天我们进入 Cilium 安全相关主题, 介绍 Kubernetes 网络策略以及 CiliumNetworkPolicies 额外支持的内容. 网络策略(N ...
- 《SQL与数据库基础》06. 函数
目录 函数 字符串函数 数值函数 日期函数 流程函数 本文以 MySQL 为例 函数 函数是指一段可以直接被另一段程序调用的程序或代码. 要查看函数操作的结果,可以使用 SELECT 函数(参数); ...