javascript建议效果自动完成代码共享

首先，使用的框架当然是我的框架，mass Framework。当然，您可以使用其他框架，例如jQuery。没有什么复杂的。只要你明白这个原理，你就能马上解决它。想必，在未来，你也会遇到做搜索框的工作。由于我没有后端，所以我将一个对象作为本地数据库。我现在想做的实际上比建议要高级得多，类似于IDE的语法提示。成品已经放到github上了。

好吧，我们开始吧。首先是结构层。安装了FF的同学可以在百度主页查看源代码。当输入几个字母时，他们会动态生成那些HTML。然而，成就在于在搜索栏的底部放置了一个DIV，并在其中放置了一个表，该表动态存储候选单词。并且如果候选词不是用户输入的部分，也就是JS自动补充的部分，它会把它们放在一个B标签中，并以粗体显示。不过我觉得用表太重了，就用ul列表代替。为了让IE6支持略读变色的效果，我还在里面放了一个A标签。为了方便取词，我还为它增加了一个属性(A标签)，专门用来存储补语后的单词。一般是这样的：复制的代码如下： Div id=' search _ wrapper ' Div input id=' search ' autocomplete=' off '/Div id='建议_ wrapper' ul id='建议_ list' li adata-value='完整词汇' href='javascript:void(0 (0)'用户输入部分的自动提示部分/a/阿利数据-value='完整词汇' href='javascript:void(0)'用户自动提示部分-最多10多li-/ul/div/div看结构，其实是两部分，div#search_wrapper可见，div # advise _ wrapper“不可见”(只要里面没有Li元素，就不会占用空间，无法显示)。输入搜索框有一个属性自动完成，用来关闭浏览器的提示功能。关于数据值，HTML5推荐这种命名方法，用于定义要缓存的数据。data-*将放置在尖端浏览器中名为dataset的对象中。例如，复制代码如下： div id=' Situ梅铮'数据-饮料='咖啡'数据-用餐时间=' 12:00' 12:00/div。我们可以通过以下方式访问它：复制代码如下： varel=document . getelementbyid(' sito梅铮')。alert(el.dataset .饮品)；alert(El . dataset . MealTime)；当然，也可以不设置属性，直接获取A标签的innerText或者textContext。注：完整词汇=用户输入部分的自动提示部分。所以A标签里不要加那么多东西，以免出现空格等东西，导致检索失败！然后是风格部分，不过我就不细说了。很简单：复制代码如下： # search _ wrapper { height :50 px；} # search { width:300px} # advise _ wrapper { position : relative；} #建议_列表{ position:absolutez指数：100；list-style:无；margin:0划水：0；背景# fffafaborder:1px固体# cccborder-bottom:0无；} #建议列表阿利{ display: block高度：20 px；宽度width:304pxcolor: # 000border-bottom:1px实心# ccc线高：20 px；文本装饰：无；} #建议列表li a:hover，glow _建议{ background: # ffff80}好的，这就是重点。由于我没有背景，所以我想使用一个本地对象作为本地数据库。这个对象当然是一个JS对象。一般来说，我们遍历对象是obj.aaa.bbb.ccc，所以我们一直点击。事实上，每次我们到达一个点时，我们都使用for in循环来遍历。因此，我们倾听文本内容的输入，一旦输入框的内容发生变化，就获取它，然后在for in循环中进行比较。如果是这个输入值开头的属性，拿出来放入数组，一直取十个。然后，将这些数组的内容拼接成上述li元素格式，并粘贴到ul元素中。其中还要注意以下几点：如果一开始就输入了点，我们就取窗口对象的十个属性，以后遇到点就切换这个对象。好了，开始写代码，因为用的是我的框架，大家都可以下到这里。这个项目的主页上有一个自述文件，教你如何安装微型计算机。Net服务器并查看文档。一开始，你可以把它想象成带有模块加载功能的jQuery。API 90%相似。如果我们想使用它的事件模块和属性模块，它会加载相关的依赖项，添加ready参数，并在domReady之后执行。

选择输入框后，我们将一个输入事件绑定到它，这是标准浏览器支持的事件。我的框架在IE下是兼容的。请使用jQuery和原生学生用propertychange事件模拟它。副本代码如下：//由Situ梅铮$。require ('ready，event，attr '，function(){ var search=$(' # search ')，hash=window，prefix=' '，fixie=nansearch . addCLaSS(' search _ target ')；Search.input(function(){//听输入var input=this.value，//原值val=input.slice (prefix.length)，//比较值output=[]；//用于放置输出内容if(fixe===input){ return//IE是通过程序改变输入框中的值并触发propertychange事件。因此，我们不能上下翻转{ for(var prop in hash){ if(prop。(val)=0的索引{//获取API if(输出。以输入值开始的push(' lia href=' JavaScript 3360 void(0))。数据值=' '前缀道具' ' ' '输入' '(前缀道具)。slice(input . length)'/a/Li ')==10){ break；} } }//如果遇到点向前或点向后取消if (val。charat (val。length-1)=' . '| |(输入！val) ){ var arr=input.split(' . ');哈希=窗口；for(var j=0；j arr.lengthj){ var El=arr[j]；if(El hash[El]){ hash=hash[El]；//重置对象以遍历API}}前缀=输入==' . '？' :输入；for(prop in hash){ if(output . push(' lia href=' JavaScript : void(0)')class=' search _ target ' data-value=' prefix prop ' ' ' input ' '(prefix prop)。slice(prefix . length)'/a/Li ')==10){ break；} } } $(' #建议_列表')。html(output . join(“”))；if(！输入){//重置所有hash=windowfixe=prefix=output=[]；} });});当提示列表出来的时候，我们会监控翻转效果。也就是说，当你点击键盘的方位键时，提示项会上下高亮显示，并填入搜索框。此时，您需要绑定keyup事件并检查其keyCode。标准浏览器称之为。你可以看我的博文《javascript 键盘事件总结》。实现原理很简单。定义一个外围变量来存储高亮显示的位置(索引值)，然后向上转时减一，向下转时加一。然后获取提示列表中的所有A标签，使用索引值定位某个A标签，高亮显示，然后移除之前高亮显示的A标签。副本代码如下：//由Situ梅铮$。需要(' ready，event，attr '，function(){ var search=$(' # search ')，hash=window，prefix=search . input(function(){//listening input//.});var GloWindex=-1；$(文档)。keyup(function(e)){//上下听if(/search _ target/I . test(e . target . class name)){//只代表提高性能的特定元素。var up down=0 if(e . what===38 | | e . what==。} else if(e . what===40 | | e . what===98){//down 2 upOrdown；} if(upOrdown){ var list=$(' #建议_ list a ')；//转移高亮显示的列list.eq(发光索引)。removeclass ('glow _建议')；glowIndex=upOrdownvar el=list.eq(glowIndex)。add CLaSS(' glow _建议')；fixe=El . attr(' data-value ')search . val(fixe)if(GloWindex===list . length-1){ GloWindex=-1；} } } });});最后，输入并提交。我写了另一个按键事件。当然，您可以尝试将两个键盘组合成一个(监视器窗口)。我写这个是为了教学。副本代码如下：//由Situ梅铮$。需要(' ready，event，attr '，function(){ var search=$(' # search ')，hash=window，prefix=search . input(function(){//listening input//.});var GloWindex=-1；$(窗口)。按键(功能(e){//上下监控/.});Search.keyup(函数(e){//监听并提交var input=this.valueIf(input(e . what==13 | | e . what==108)){//如果按ENTER，alert(input)//在实际项目中，应该跳转到搜索结果的页面！} });});至此，建议效果完成。如果下载了我的框架的同学打开服务器，打开文档的首页，就能看到这个效果。

在实际项目中，建议其实更简单，就是当输入框中的文本发生变化时，AJAX在后台请求一个数组，然后拼接成li元素的格式。