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]. ...
随机推荐
- java查询sql动态查询需要的字段
方法一:使用"trim"标签. <select id="selTest" parameterType="mocha.framework.enti ...
- Unity UGUI的RectMask2D（2D遮罩）组件的介绍及使用
Unity UGUI的RectMask2D(2D遮罩)组件的介绍及使用 1. 什么是RectMask2D组件? RectMask2D是Unity UGUI中的一个组件,用于实现2D遮罩效果.它可以限制 ...
- radware 相关（alteon产品）
目录 术语 组网 配置思路 IP 规划 负载均衡器的IP规划 服务器的IP规划 登陆设备 简单命令行配置 Main Menu 管理IP 确认设备版本 telnet/sshd/http enable 网 ...
- 2023-07-13 C#深拷贝功能以及推荐使用方式
C#深拷贝功能以及推荐使用方式 [作者]长生 深拷贝 深拷贝是用于在对引用对象进行复制时的一种操作方式.平常我们新建一个对象,然后直接赋值,只是对地址引用的赋值,在修改新建的对象时,也会对我们复制的对 ...
- WinForm RichTextBox 加载大量文本卡死和UTF-8乱码问题
在RichTextBox控件的使用中我们会遇到加载TXT文件的问题,通常我们会有两种处理方式. 一.加载TXT字符串,设置到RichTextBox //打开并且读取文件数据 FileStream fs ...
- 在 ubuntu 中安装或升级最新版本的 Elasticsearch
1. 安装 java 8 首先最新版本的elasticsearch需要java8的支持,那先来安装一下. $ sudo add-apt-repository -y ppa:webupd8team/ja ...
- mysql 命令安装
1. mysql 下载安装好压缩文件,下面我们进入正题,少废话. 09:39:112023-08-05 先到 mysql 官方网站下载:https://dev.mysql.com/downloa ...
- [docker]安装常见数据库
前言 本文使用docker安装常见数据库大部分没配置什么参数,只是基本的安装. 不只是数据库,还有elasticsearch.rabbitmq等和数据相关的服务. docker 版本: 18.06.3 ...
- 基于 ASP.NET 的投票系统
OnlineVoting 基于 ASP.NET 的投票系统 功能页面 登录 注册 首页 投票广场 查看别人发布的投票. 个人中心 个人资料 换头像.修改密码和其他信息. 发布投票 项目地址:https ...
- go项目实现mysql接入以及web api
本文为博主原创,转载请注明出处: 创建go项目,并在go项目中接入mysql,将mysql的配置项单独整理放到一个胚子和文件中,支持项目启动时,通过加载配置文件中的值,然后创建数据库连接. 之后使用n ...