Vue百度搜索框实例

百度搜索框实例

• 思路：
  1. 通过vue.js和bootstrap.js来构建搜索框和列表页面架构；
  2. 文本输入框通过v-model设置与应用的双向绑定，列表框通过v-for来遍历，获取遍历的数据动态绑定在列表中；
  3. 设置@keyup事件，触发函数，函数内，通过vue-resource插件，进行jsonp请求数据，请求百度服务器上的数据，通过设置params中的wd值来进行查找数据，赋值给ary，遍历到列表中；
  4. 实现文本输入框输入内容，列表同时更新数据；
  5. 设置列表中第一条数据点亮效果，动态绑定样式，利用:class="{active:index===i}"，意思为，当index值与i值相等时，设置类名active；其中index为data中设置的值，i为遍历ary数组时的列表数据索引值；
  6. 设置列表中第一条数据点亮，即设置index的初始值为0；
  7. 设置下键效果：按键盘中的下键，实现列表数据的变化和点亮；同时输入框中的数据显示选中的列表中的数据；
     • 设置@keydown.down事件，触发putDown函数，函数中改变this.index的值，让其累加，然后通过%来控制上限；
  8. 设置上键效果：按键盘中的上键，实现列表数据的变化和点亮；同时输入框中的数据显示选中的列表中的数据；
     • 设置@keydown.up事件，触发putUp函数，函数中改变this.index的值，使其累减，然后判断边界值；控制下限；
     • 注意：按上键时，文本框中会默认选中文字的最前面，所以需要阻止默认事件，即设置@keydown.up.prevent事件；
  9. 设置上下键的效果中，需要注意，在更新输入框中的数据后，会执行keydown事件，重新进行数据获取，然后更新列表数据，所以，需要在keydown事件函数中，设置条件判断，通过事件对象e.keyCode来判断上下键，当按下上下键时，阻止搜索程序；
  10. 设置回车键效果：当按下enter键后，搜索文本框中的内容；
      • 设置@keydown.enter事件，触发goSearch函数，函数中利用window.open(url)来打开搜索地址；
• 注意点：
  1. 文本框必须绑定keyup事件，不能绑定keydown事件；在获取数据时，必须判断msg是否为空，如果为空，则无需发送请求，并赋值ary为空；
• 实例代码：

 
 
 
     
     
     
 
 
 

     

         
百度搜索
         

             

                 
             
         
         

             
{{item}}
         
     
 
 
 
 
 
 

升级版百度搜索框实例

• 思路：
  1. 引入bootstrap插件；写出静态页面；
  2. 通过vue-resource插件，向百度服务器发送请求，获取数据； 文本框绑定keyup事件，当键盘抬起时，获取新的输入值，然后在获取数据；
  3. 获取数据赋值dataAry变量，通过v-for遍历插入dom结构；
  4. 功能1：通过按向上，向下键来使对应列表中的内容赋值到文本输入框内，并且该列被点亮；
     • 文本框需绑定两个事件：keydown.up和keydown.down 指的是键盘上向下和向上按键事件；注意：当向上按键时，光标会在文本的最前面，所以需要阻止默认事件，则需绑定keydown.up.prevent
     • 设置变量n，作为整个项目中的介质，目的：通过设置n的值，来点亮指定的列表；
     • 在html中，绑定li时，通过v-bind来绑定class，设置为三目，通过判断index和n-1值是否相等，来设置类名，进而点亮列表；
     • 在两个事件触发的函数中，对n进行自加和自减处理，设置边界值判断；
     • 对文本框内数据进行赋值：在事件函数中，通过n的值来获取指定列表的索引值，进而在dataAry数组中找到对应的元素内容，赋值给msg即可；
     • 当向上向下回到文本框时，让文本框中的数据为最开始输入的内容；方法：设置变量initVal，用来存储最初的输入值，赋值位置为getData()函数中，在每次向百度服务器发送请求之前，赋值给initVal；
     • 注意：文本框绑定了keyup事件，当向下和向上按键触发后，也会再次触发，所以，必须阻止两个事件的执行；方法：通过事件对象e来获取按键码，进而阻止指定按键码的执行；
  5. 功能2：光标移入列表后，列表项被点亮；文本框中的内容不改变；并且，光标移出列表后，点亮消失；满足：当光标移入一个列表后，该列表被点亮，然后按上下键，列表会依次被点亮；
     • 给每个列表绑定两个事件：mouseenter和mouseleave事件；光标移入移出事件；
     • 事件函数中，通过获取列表的索引值，来赋值n的值；进而实现点亮功能；
     • 移出函数中，赋值n值为文本框对应的值；
  6. 功能3：当按键盘enter键后，跳转到新的页面搜索；当鼠标点击列表项时，跳转到新的页面加载；
     • 给文本输入框绑定keydown.enter事件；
     • 给列表项绑定click事件；
     • 两个事件，可以绑定同一个函数；
     • 跳转到新的页面加载：通过window.open(url)实现；window.href=url实现在本页面中加载；
     • 注意：keydown.enter事件绑定时，为传入实参，则触发后会给函数体默认传入事件对象e，而click事件因为赋值实参，所以不会默认传入事件对象e；所以需要给函数体设置两个形参；判断第二个形参是否被赋值实参，来判断是触发的哪个事件；进而进行不同操作；
• 注意点：
  1. 文本输入框中绑定keyup事件，不能绑定keydown事件，当键盘抬起时，获取msg，然后获取数据；
  2. 在获取数据之前，必须判断msg是否为空，若为空，则无需在发送请求获取数据；
  3. @keydown.enter和@click事件；1）在绑定事件时，如果不传实参，则事件触发后默认向函数体中传入一个事件对象e；2）在绑定事件时，若给函数体传了实参值，则事件在触发后，不会再默认传入事件对象，若需要获取事件对象，则可在传入实参时，传入$event实参；
  4. 鼠标移入移出事件@mouseenter和@mouseleave;
  5. window.location.href=url指的是：在本页面中加载新页面；
     window.open(url)指的是：在新的页面中加载新页面；
• 实例代码：

 
 
 
     
     
     
     
     
 
     
     
     
 
     
     
     
 
 
 

     

         
百度搜索框实例
         

             
         
         

             
{{item}}