js实现百度，淘宝搜索功能
.gif)
function byClassName(sClassName){
if(document.getElementsBYClassName){
return document.getElementsByClassName(sClassName);
} else {
var allTagsName = document.getElementsByTagName('*');
var result = [];
for(var i = 0; i<allTagsName.length;i++){
if(allTagsName[i].className === sClassName){
result.push(allTagsName[i]);
}
}
return result;
}
}
var oTxt = byClassName('txt')[0];
var oBtn = byClassName('btn')[0];
var oList = byClassName('list')[0];
oTxt.onpropertychange = oTxt.oninput = function(){
// 先创建一个script标签,引入接口
var oScript = document.createElement('script');
oScript.src = 'https://suggest.taobao.com/sug?code=utf-8&q='+ this.value+'&_ksTS=1519875402602_594&callback=callback';
// 将script标签添加到页面中
document.body.appendChild(oScript);
// 移除标签
document.body.removeChild(oScript);
}
//创建回调函数接收数据
function callback(data){
oList.innerHTML = '';
data.result.forEach( v => {
var oLi = document.createElement('li');
oLi.innerHTML = v;
oList.appendChild(oLi);
oLi.onclick = function(){
oTxt.value = oLi.innerHTML;
oList.innerHTML = '';
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form[name=search-form] {
margin: 40px auto 0;
width: 640px;
}
input[name='search-content'] {
width: 600px;
line-height: 30px;
border:1px solid #ccc;
vertical-align: bottom;
outline: none;
}
input[name='search-btn'] {
width: 40px;
height: 32px;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
}
#list {
list-style: none;
margin: 0 auto;
width: 640px;
}
#list li {
padding: 10px 4px;
border-bottom: 1px dashed #eee;
}
</style>
</head>
<body>
<form action="javascript:;" name="search-form">
<input type="text" name="search-content"><input type="submit" name="search-btn">
</form>
<ul id="list"></ul> <script> var oForm = document.forms['search-form']; var oContent = oForm.elements['search-content']; var oList = document.getElementById('list'); // 定义回调函数
function callback(data) {
oList.innerHTML = '';
data.s.forEach( v => {
var oLi = document.createElement('li');
oLi.innerHTML = v; oList.appendChild(oLi);
});
}
oContent.onpropertychange = oContent.oninput = function () {
var oScript =document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1&cb=callback'; document.body.appendChild(oScript);
document.body.removeChild(oScript);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>跨域请求数据</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
form{
width: 640px;
margin: 30px auto 0;
position: relative;
}
input{
box-sizing: border-box;
outline: none;
}
.txt{
width: 600px;
line-height: 30px;
vertical-align: bottom;
border: 1px solid #ccc;
}
.btn{
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: pointer;
}
.list{
position: absolute;
}
.list li{
width: 592px;
padding: 10px 4px;
cursor: pointer;
}
.list li:hover{
background: #eee;
}
</style>
</head>
<body>
<form action="javascript:;">
<input class="txt" type="text" /><input class="btn" type="submit" />
<ul class="list"></ul>
</form>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>
js实现百度，淘宝搜索功能的更多相关文章
- JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）
以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...
- vue实现淘宝购物车功能
淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...
- selenium+PhantomJS 抓取淘宝搜索商品
最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...
- solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能
首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...
- js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- 百度搜索词&淘宝搜索词 接口实现
百度和淘宝并没有正式的提供一个公开API给我们用,但是经过分析他们的源代码,还是找到了解决方法. 1 2 3 4 5 6 7 8 9 /*baidu&taobao callback*/ fun ...
- 百度-淘宝-360搜索引擎搜索API
百度(baidu) Api地址:http://suggestion.baidu.com/su?wd=设计&p=3&cb=window.bdsug.sug window.bdsug.su ...
- 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面
由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...
- Android 淘宝搜索记录分析及千牛数据库名称关联
一 taobao搜索关键字分析1.导出淘宝数据文件夹.2.搜索search 找到search文件夹.查看里面可疑文件如history_8d4255cc9c9199c6ec3be940936986b9. ...
随机推荐
- 搭建Nginx图片服务器（Linux）
知识点: 在Linux系统上安装Nginx服务器,配置图片访问路径 通过ftp上传图片到,指定路径,通过浏览器访问指定路径中的图片 参考博客:http://blog.csdn.net/maoyuanm ...
- java 普通内部类和静态内部类
区别1: 普通内部类实例化后的对象持有外部类的引用,在非静态类内部可以访问外部类的成员:静态内部类实例化不持有外部对象引用,不能访问外面的方法和成员: 从耦合度上来讲,普通内部类跟外部类耦合程度很高, ...
- LeetCode——Unique Binary Search Trees
Question Given n, how many structurally unique BST's (binary search trees) that store values 1...n? ...
- Flume在企业大数据仓库架构中位置及功能
Flume在企业大数据仓库架构中位置及功能 hadoop 数据仓库 flume 数据仓库架构 1.如下图所示,外部数据中,关系型数据库导入到HDFS用sqoop,由Nginx产生的文件实时监控用Flu ...
- ctci1.2
; ; i < len/; i++){ tmp = *(str+i); *(str+i) = *(str+len--i); *(str+l ...
- 20165332 2017-2018-2《Java程序设计》课程总结
20165332 2017-2018-2<Java程序设计>课程总结 一.每周作业及实验报告链接汇总 我期望的师生关系 学习基础和c语言基础调查 Linux安装及命令入门 第一周学习总结 ...
- bzoj1002: [FJOI2007]轮状病毒 生成树计数
轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图所示 N轮状病毒的产生规 ...
- 1-27 awk 基本使用
大纲: 色彩: awk基本使用 ##################################################### 一.色彩:shell中,设置输出文本色彩(前景色,背景色) ...
- 【转载】deque双向队列
继vector和queue之后,又发现一个很好用的东西. 本篇转载自http://blog.csdn.net/morewindows/article/details/6946811 deque双向队列 ...
- Java SHA256/Base64转.NET(C#)实现---(华为云云市场.NET版本加密方式)
前言: 工作需要,对接华为云应用市场的 API 接口,由于维护团队都是 .NET 所以用 .NET 来开发. 简单了解一下 SHA256 加密算法,本质就是一个 Hash,与 MD5 相比就是计算量大 ...