jQuery实现模拟搜索引擎的智能提示功能简单示例

本文实例讲述了框架实现模拟搜索引擎的智能提示功能。分享给大家供大家参考，具体如下：

框架中模仿搜索引擎的智能提示功能，本案例仅供初学者一个参考，也是我个人在初学框架时写的一个初学案例。有不当之处，敬请指教。

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net jQuery模拟搜索提示/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js /脚本脚本var arr=['小李','小二','小三','老林','老王','二哈','小强'];var focus=false$(文档)。ready(function(){ $(“# txt”)).bind('focus '，function(){ $('#auto ')).show()；ABC()；});$('#txt ').bind('keyup '，function(){ ABC()；});$('#txt ').bind('blur '，function(){ $('#auto ')).hide()；});函数ABC(){ var auto=$(' # auto ')；var txt=$('#txt ').val()；var new _ arr=new Array()；var n=0；如果索引Of($('#txt ').val())=0){ new _ arr[n]=arr[I]；} }自动。empty()；for(new _ arr中的I){ var div node=$(' div ').attr('id '，I)；DivNode.attr('style '，' width:100px高度' :30 px'border: 1px纯红；');div节点。将鼠标悬停在(function(){ $(this))上.css(“”背景色','白色');});div节点。鼠标离开(函数(){ $(this)).css(“”背景色','白色');});div节点。单击(function(){ $(' # txt ')).瓦尔($(这个).html())；});div节点。html(new _ arr[I])；汽车。追加(DivNode)；} } });/脚本/头体div输入类型=' text ' id=' txt '/div id=' auto '/div/div/body/html运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。