模仿搜索框搜索提示案例笔记分享

搜索提示框效果

本案例是一个类似百度搜索时输入内容后在搜索框下按照搜索内容显示出相关搜索提示的效果需要用到的技术是ajax和jQuery

大概效果如下

第一步：搭建基本HTML

主要由一个文本框和一个提示框组成

文本框为input标签

提示框为ur包含lu标签

基本效果如下

**注意：**后边需要先把提示框隐藏

代码如下

body中的


<div class="container"><!-- 搜索框 --><input type="text" id="sreach"><!-- 提示框 --><div class="alert"><ul><li>前端开发</li><li>前端课程</li><li>web前端</li></ul></div></div>

css代码

<style>.container #sreach {width: 300px;}.container .alert {width: 300px;border: 1px solid lightgray;display: none;}.container .alert ul {list-style: none;padding: 0;margin: 0;}</style>

第二部分编写js代码

当然需要提前导入jQuery库

第一步：捕捉用户数据
第二部：获取json数据
第三部：用户开始输入时显示提示框，按照用户的输入数据与json中的name对比使得json中的name包含用户的数据则进行下一步操作
第四部：遍历获取对应name对象中的value值
第五步：将value的值更新到页面中
第六步：在用户敲击键盘时在页面中情况之前更新的数据
第七部：设置失去焦点时改为隐藏提示框

js代码：

    <script src="jquery-3.5.1.js"></script><script>/*捕获用户输入行为1.绑定事件->keydown，keyup和可以press2.输入事件->input*///给搜索框绑定键盘输入事件$('#sreach').bind('input', function () {//删除之前的数据$('.alert>ul').empty();//1.根据用户和输入的内容动态获取相关数据var inputValue = $(this).val();$.getJSON('data/sever4.json', function (data) {//遍历json数据$.each(data, function (index, obj) {//获取namevar name = obj.name;//判断name值包含输入的值if (name.indexOf(inputValue) >= 0) {//获取value值var value = obj.value;// 遍历value值$.each(value, function (index, text) {//将每个value值添加到文本框$('.alert>ul').append($('<li>'+text+'</li>'))})}})});//2.将提示框从隐藏状态改为显示状态$('.alert').css('display', 'block');//如果失去焦点将提示框改为隐藏}).bind('blur',function(){$('.alert').css('display', 'none');})</script>

json数据：

[{"name":"java","value":["java","javascript","javascript权威指南","java官方文档"]},{"name":"成果","value":["诸葛大力","成三岁","铁憨憨","爱情公寓"]},
{"name":"周淑怡","value":["人均暗恋周淑怡","水龙姐","职业赛场说牛皮","周淑怡与药水哥"]
}
]

完成后的效果：

完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>搜索提示框效果</title><style>.container #sreach {width: 300px;}.container .alert {width: 300px;border: 1px solid lightgray;display: none;}.container .alert ul {list-style: none;padding: 0;margin: 0;}</style>
</head><body><div class="container"><!-- 搜索框 --><input type="text" id="sreach"><!-- 提示框 --><div class="alert"><ul><li>前端开发</li><li>前端课程</li><li>web前端</li></ul></div></div><script src="jquery-3.5.1.js"></script><script>/*捕获用户输入行为1.绑定事件->keydown，keyup和可以press2.输入事件->input*///给搜索框绑定键盘输入事件$('#sreach').bind('input', function () {//删除之前的数据$('.alert>ul').empty();//1.根据用户和输入的内容动态获取相关数据var inputValue = $(this).val();$.getJSON('data/sever4.json', function (data) {//遍历json数据$.each(data, function (index, obj) {//获取namevar name = obj.name;//判断name值包含输入的值if (name.indexOf(inputValue) >= 0) {//获取value值var value = obj.value;// 遍历value值$.each(value, function (index, text) {//将每个value值添加到文本框$('.alert>ul').append($('<li>'+text+'</li>'))})}})});//2.将提示框从隐藏状态改为显示状态$('.alert').css('display', 'block');//如果失去焦点将提示框改为隐藏}).bind('blur',function(){$('.alert').css('display', 'none');})</script></body></html>

模仿搜索框搜索提示案例笔记分享相关推荐

java ajax搜索框提示,Javaweb-案例练习-2-给搜索框添加提示
Javaweb-案例练习-2-给搜索框添加提示凯哥java 凯哥java 给搜索框添加搜索提示功能这篇来利用Ajax做一个给搜索框添加搜索提示的功能,这个我们在百度首页,搜索框随便输入一个字符,就 ...
基于jquery的搜索框输入提示
仿百度与google的搜索框输入提示,支持键盘上下选择与鼠标点击选择.只包含前面代码,后台返回数据为模拟的数据. 1.未输入前的效果 2.输入内容后,自动弹出下拉层,里面有若干匹配输入内容的输入建议项 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
基于vue与element-ui写出的关于搜索框搜索关键字，下方关键字高亮的demo
这是一个基于vue与element-ui写出的关于搜索框搜索关键字,下方关键字高亮的demo 希望对大家有所帮助效果如下: <template>< ...
如何解决Chrome浏览器多功能搜索框搜索时不能调用百度搜索引擎
2019独角兽企业重金招聘Python工程师标准>>> 如何解决Chrome浏览器多功能搜索框搜索时不能调用百度搜索引擎 http://www.baidu.com/s?ie=UTF- ...
js实现搜索框智能提示上下移动效果
Posted on 2011-06-08 23:09 杨锐-->天柱山阅读(597) 评论(3) 编辑收藏最近公司网站首页搜索框改进,需要在智能提示列表上加上支持键盘上下键移动的效果. 搞 ...
VUE实现搜索框搜索功能
实现效果如下: HTML部分:添加搜索框 JavaScript部分: PS:orderlist是订单列表的数据. 参考链接: vue实现搜索功能 vue如何实现搜索功能以及逻辑 (代码与笔记都粗劣, ...
vue实现搜索框搜索新增_基于Vue.js实现简单搜索框
主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo ...
python selenium使用百度搜索框搜索的几种方式
selenium有个功能就是可以指挥浏览器,模拟用户使用,比如使用百度自动搜索. 实现的几种方式: 打开百度官网,找到搜索框,使用右键检查功能,找到输入框的节点 <input type=&quo ...

模仿搜索框搜索提示案例笔记分享

搜索提示框效果

第一步：搭建基本HTML

第二部分编写js代码

模仿搜索框搜索提示案例笔记分享相关推荐

最新文章

热门文章