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 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
了解一点js的Eval函数
Jul 26 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 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
PHP的变量类型和作用域详解
2014/03/12 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python实现给微信公众号发送消息的方法
2017/06/30 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python线程同步的实现代码
2018/10/03 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
C语言中break与continue的区别
2012/07/12 面试题
中职生自我鉴定范文
2013/10/03 职场文书
银行自荐信范文
2013/10/07 职场文书
党章培训心得体会
2014/09/04 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
开学典礼致辞
2015/07/29 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电