Ajax实现搜索提示框~超级详细

以下是对Ajax搜索提示框的整理，希望可以帮助到有需要的小伙伴~

文章目录

静态页面
用户的操作是用事件来处理的
源码

静态页面

搜索框 input

提示框无序列表加容器 div 做样式【默认不显示】

<div class="container"><!-- 搜索框 --><input type="text" id="search" /><!-- 提示框 --><div class="alter"><ul></ul></div>
</div>

用户的操作是用事件来处理的

用户输入事件 – 用户在搜索框中打字，键盘事件或用户输入 input 事件都可以

【提示框默认是不显示的，用户在搜索框输入内容后才显示提示框】

提示框：隐藏切换到显示或者显示的时候创建一个提示框

提示框中的内容会实时变化，要用到异步交互。由文本框输入事件触发

/*捕获用户输入行为1. 绑定键盘事件 - keydown、keyup、keypress2. 绑定输入事件 -> input*/
$("#search").bind("input", function (event) {$(".alter>ul").empty();console.log("this is input");// 1.根据用户输入的内容，动态获取相关提示数据var inputValue = $(this).val(); // val() 方法返回或设置被选元素的值。$.getJSON("data/server4.json", function (data) {// console.log(data);$.each(data, function (index, obj) {var name = obj.name;if (name.indexOf(inputValue) >= 0) {var value = obj.value;$.each(value, function (index, text) {$(".alter>ul").append($("<li>" + text + "</li>"));});}});});// 获取焦点// 2.将提示框从隐藏状态切换到显示状态$(".alter").css("display", "block");}).bind("blur", function () {// 取消焦点 - 将提示框从显示状态切换到隐藏状态$(".alter").css("display", "none");});

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>搜索提示框</title><style>.container #search {width: 300px;}.container .alter {width: 305px;border: 1px solid #333;/* 提示框默认隐藏 */display: none;}.container .alter ul {list-style: none;padding: 0;margin: 0;}.container .alter ul li {font-size: 15px;}</style>
</head>
<body><div class="container"><!-- 搜索框 --><input type="text" id="search"><!-- 提示框 --><div class="alter"><ul></ul></div></div><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><script>/*捕获用户输入行为1. 绑定键盘事件 - keydown、keyup、keypress2. 绑定输入事件 -> input*/ $("#search").bind("input",function(event){$('.alter>ul').empty();console.log("this is input");// 1.根据用户输入的内容，动态获取相关提示数据var inputValue = $(this).val(); // val() 方法返回或设置被选元素的值。$.getJSON('data/server4.json',function (data) {// console.log(data);$.each(data,function (index,obj) {var name = obj.name;if (name.indexOf(inputValue) >= 0) {var value = obj.value;$.each(value,function(index,text){$('.alter>ul').append($('<li>'+text+'</li>'));});}});});// 获取焦点// 2.将提示框从隐藏状态切换到显示状态$('.alter').css('display','block');}).bind('blur',function(){// 取消焦点$('.alter').css('display','none');});</script>
</body>
</html>

Ajax实现搜索提示框~超级详细相关推荐

文本框输入即时Ajax搜索,JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
ajax 文本框搜索,JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
ajax弹出提示框,Ajax环境下弹出提示框
在普通的ASP.NET环境中,我们要想在WEB窗体上弹出一个对话框,经常用到的是如下代码: Response.Write(""); 然而在Ajax的环境中却不能使用上述的代码,否则 ...
ajax实现搜索提示源码,Jquery实现搜索框提示功能示例代码
博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数 ...
模仿搜索框搜索提示案例笔记分享
搜索提示框效果本案例是一个类似百度搜索时输入内容后在搜索框下按照搜索内容显示出相关搜索提示的效果需要用到的技术是ajax和jQuery 大概效果如下第一步:搭建基本HTML 主要由一个文本框和一 ...
搜索提示的实现(仿百度)：附源码和在线demo
这篇文章是我转载过来的,我现在做的搜索引擎项目也做了一个基于Jquery做的自动提示功能,这里就不贴了,下面我给出一个我转载的文章分享给大家,喜欢的拿去吧! 智能搜索提示的功能大家都用过,百度搜索的时 ...
Android--多选自动搜索提示
一. 效果图常见效果,在搜素提示选中之后可以继续搜索添加,选中的词条用特殊字符分开二. 布局代码 <MultiAutoCompleteTextView android:id="@+ ...
js实现搜索框智能搜索提示，类似百度搜索
List item 一.概要场景:用户可能记不得是哪个搜索词了,但是结果表单是唯一的,不可能实现模糊搜索. 解决方案:搜索框实现智能搜索提示.在用户搜索键入关键字的过程中,不断去请求后台,将查询结果 ...
ajax suggest,ajax Suggest类似google的搜索提示效果
ajax Suggest类似google的搜索提示效果 2020-11-11 14:21:34 阅读数 375 收藏 0 实现: 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action ...

Ajax实现搜索提示框~超级详细

文章目录

静态页面

用户的操作是用事件来处理的

源码

Ajax实现搜索提示框~超级详细相关推荐

最新文章

热门文章