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 相关文章推荐
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
javascript表单验证大全
Aug 12 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
js判断节假日实例代码
Dec 27 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php中定时计划任务的实现原理
2013/01/08 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
用户注册常用javascript代码
2009/08/29 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python读写json文件的简单实现
2017/04/11 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
应届大学生的推荐信
2013/11/20 职场文书
给导游的表扬信
2014/01/10 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
法定代表人授权委托书
2014/09/19 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
创业计划书之酒吧
2019/12/02 职场文书