仿淘宝JSsearch搜索下拉深度用法


Posted in Javascript onJanuary 15, 2018

我们首先给出本次关于JSsearch程序的相关源码:https://gitee.com/skyogo/JSsearch

我们下载JSsearch1.0 Community版本

下载好了之后我们再下载一个类似淘宝的购物页面

然后,我们打开这个页面,会发现是这样的

仿淘宝JSsearch搜索下拉深度用法

此时我们关掉页面,将我们的JSsearch.js拷贝一份到淘宝页面的根目录的js文件夹下面

拷贝完了之后,我们在html页面中引入它(在body最底部写)

<script src="js/JSsearch.js"></script>
<script>
</script>

然后我们在上面的第76行(input标记下面)里写上这段代码

<div id="search-recommend">
 没有搜索结果
</div>

然后我们打开css/index.css文件,在里面写上这段css样式表

#search-recommend{
  height: 40px;
  width: 580px;
  position: absolute;
  top: 110px;
  border: 1px gray solid;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 11px;
  font-size: 15px;
  cursor: pointer;
  background: white;
}

运行一下html页面,发现搜索框下面多出了一个框

仿淘宝JSsearch搜索下拉深度用法

至此,我们的html和css代码就写完了,接下来,我们来写js代码

我们现在将页面关闭,打开开发工具,在index.html里面找到大约是2754行的<script>标签,那么我们现在就要在里面写入我们的查询代码

首先,我们写入这段代码:(重复获取输入框里面的值)

var lastValue = document.getElementById("search-in").value;
setInterval(function(){   
},10)

然后,我们在var的下面写入判断语句,判断是否输入框的值改变了

if(lastValue != document.getElementById("search-in").value){          
}

接着,我们在if里面写入:

lastValue = document.getElementById("search-in").value;

这段话,就是说重复判断,如果输入框的值改变了,那么就重新赋值

然后,我们再在下面写入:

if(lastValue==null||lastValue==""){
  document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{
}

这段话,就是判断如果输入框现在的值为空,那么就让他显示“没有搜索结果”

接着,我们在else里面写入:

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{ 
}

这时,我们就调用了JSsearch的用关键词查找的方法,哦,对了,我们还没写itemList这个数组

这时把光标移到setInterval的上面一行,写上:

var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];

itemList是我们所有的商品合集

现在再把光标移回去,移到else里面,写上:

document.getElementById("search-recommend").innerHTML = newItemList[0];

此时,我们再打开html文件,再输入框里面输入内容,就会发现已经有联想了!

仿淘宝JSsearch搜索下拉深度用法

当然,这还只是个雏形,我们还有一个BUG需要解决,就是当你输入一个多个字符串都含有的字符后,他并不一定推荐你想的那个,这点JSsearch已经帮我们想好了,我在这里就不再写了,如果想解决这个BUG,可以参考JSsearch的说明文档自行解决!

Javascript 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
js实现上传图片及时预览
May 07 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 #Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 #Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 #Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 #Javascript
js实现一个简单的MVVM框架示例
Jan 15 #Javascript
详解angularjs 学习之 scope作用域
Jan 15 #Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 #Javascript
You might like
php printf输出格式使用说明
2010/12/05 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
jQuery live
2009/05/15 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python如何查看网页代码
2020/06/07 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python 读取位于包中的数据文件
2020/08/07 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
Shell编程面试题
2016/05/29 面试题
幼教个人求职信范文
2013/12/02 职场文书
女大学生自我鉴定
2013/12/09 职场文书
《尊严》教学反思
2014/02/11 职场文书
党员领导干部承诺书
2014/05/28 职场文书
党员倡议书
2015/01/19 职场文书
法制教育观后感
2015/06/17 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫