js文本框输入内容智能提示效果


Posted in Javascript onDecember 02, 2015

本文实例讲述了js文本框输入内容智能提示效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

js文本框输入内容智能提示效果

大体思路:

1.监听文本框事件。这里是用的keyup事件。大家可以尝试用onchange事件。不过感觉keyup事件的效果要好一点。

2.根据输入内容通过ajax异步的方式去访问后台数据。

3.遍历返回数据将数据添加到显示区域。

4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失。

5.后台数据应该拼接成json格式。

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>自动提示</title>
 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <script type="text/ecmascript">
  function txtchange() {
   var nnmae = $("#intxt").val();
   $.ajax({
    type: "post",
    url: "ashx/AutoNote.ashx",
    data: { name: nnmae },
    dataType: "json",
    success: function (data) {
     $("#tbcontent").html(""); //删除原有数据
     if (data != "null") {
      for (var i = 0; i < $(data).length; i++) {
       $("#tbcontent").append('<div class="item" onclick="mousedown(this)">' + data[i].name + '</div>');
      }
      $("#tbcontent").slideDown();
     }
    }
   });
  }
  //选择其中的提示内容
  function mousedown(object) {
   $("#intxt").val($(object).text());
   $("#tbcontent").fadeOut();
  }
  //文档框失去焦点,隐藏提示内容
  function lost() {
   $("#tbcontent").fadeOut();
  }
 </script>
 <style type="text/css">
  .item:hover
  {
   background-color: Gray;
   cursor:pointer;
  }
  .show
  {
   width: 200px;
   z-index: 10;
   display: block;
  }
  .hidden
  {
   width: 200px;
   z-index: 10;
   display: none;
   border:1px solid rgb(80,160,91);
   border-top:none;
  }
  table tr td
  {
   margin:none;
   padding:none;
   border:none;
  }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div style="width: 210px; margin-left:auto; margin-right:auto">
  <table>
   <tr>
    <td>
     <input type="text" style="width: 200px;" id="intxt" onkeyup="txtchange()" onblur="lost()"/>
    </td>
   </tr>
   <tr>
    <td>
     <div id="tbcontent" class="hidden">
     </div>
    </td>
   </tr>
  </table>
 </div>
 </form>
</body>
</html>

js文本框输入内容智能提示效果,对于我们输入信息进行搜索很有实用价值,希望这篇文章对大家学习javascript 程序设计有所帮助。

Javascript 相关文章推荐
jQuery 对Select的操作备忘记录
Jul 04 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 #Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 #Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 #Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 #Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
电子商务应届生求职信
2013/11/16 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
见习报告格式要求
2014/11/04 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL
html中两种获取标签内的值的方法
2022/06/16 jQuery