jQuery实现模拟搜索引擎的智能提示功能简单示例
网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了jQuery实现模拟搜索引擎的智能提示功能,结合实例形式分析了jQuery基于事件响应及页面元素属性动态操作实现的模拟搜索提示相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现模拟搜索引擎的智能提示功能。分享给大家供大家参考,具体如下:
jQuery中模仿搜索引擎的智能提示功能,本案例仅供初学者一个参考,也是我个人在初学jquery时写的一个初学案例。有不当之处,敬请指教。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.jb51. jQuery模拟搜索提示</title> <script src="http://libs.baidu./jquery/2.0.0/jquery.min.js"></script> <script> var arr=['小李','小二','小三','老林','老王','二哈','小强']; var focus=false; $(document).ready(function(){ $("#txt").bind("focus",function(){ $("#auto").show(); abc(); }); $("#txt").bind("keyup",function(){ abc(); }); $("#txt").bind("blur",function(){ $("#auto").hide(); }); function abc(){ var auto=$("#auto"); var txt=$("#txt").val(); var new_arr=new Array(); var n=0; for(i in arr){ if(arr[i].indexOf($("#txt").val())>=0){ new_arr[n++]=arr[i]; } } auto.empty(); for(i in new_arr){ var DivNode=$("<div>").attr("id",i); DivNode.attr("style","width:100px;height:30px;border: 1px solid red;"); DivNode.mouseover(function(){ $(this).css("background-color","white"); }); DivNode.mouseleave(function(){ $(this).css("background-color","white"); }); DivNode.click(function(){ $("#txt").val($(this).html()); }); DivNode.html(new_arr[i]); auto.append(DivNode); } } }); </script> </head> <body> <div> <input type="text" id="txt"/> <div id="auto"></div> </div> </body> </html>
运行效果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程