Suggession（对话框组件）

Google =>jQuery suggestion plugin

交互

1，input
2，用户输入字母/汉字
3，根据输入给出下拉提示
4，键盘或鼠标点击
5，（可选）是否帮他提交
网站例子

思路

1，正交原则，写出html

  


  

    
1
    
2
  
 

2，css样式

  *{padding:0;margin:0;box-sizing:border-box ;}
  ul,li{list-style:none;}
  body{
     text-align:center;
  }
 .suggession{
     display:inline-block;
    text-align:left;
 }

3，JS

1）选中状态，如下图
默认选中要不要把数据显示出来？
解决：
如果数据量大，focus的时候不显示；如果数据量小，focus的时候可以显示。
数据规模小，用户一点进来，显示数据，这样用户可以照着写

图片.png

2）监听文字变动
a，注意一个常错误的点：
监听change事件，改变输入框value，只有当输入框失去焦点的时候，才会触发函数，效果是，输入框失去焦点的时候才会输出输入框的value

$('input').on('change',function(){
      console.log(this.value)
 })

代码

b，所以使用：

keyup事件
注意：keydown(按下)、keypress(按住)、keyup（抬起）
keydown、keypress的输出值会延后一位实验代码

c，但是keyup无法监听鼠标输入（复制粘贴）

怎么办？
鼠标输入事件是：mousedown
鼠标粘贴事件是：paste
同时监听keyup和mousedown、paste事件（键盘，鼠标点击、粘贴）

    $('input').on('keyup mousedown paste',function(){
       console.log(this.value)
       })

效果一样不好
代码

c，怎么办？？
解决办法：
input事件，这是才出来的事件
IE8之前是不支持的

  $('input').on('input',function(){
        console.log(this.value)
   })

d，但是还有一个bug
使用input事件，当输入中文的时候，输入框显示的是字母，只有用户按住空格键的时候，中文才会显示在输入框
input捕获的是输入的英文，下图：

图片.png

怎么办？？？

到事件手册查找

图片.png

文本组合事件compositionend

查看compositionend

  $('input').on('compositionend',function(){
      console.log(this.value) 
  })

所以compositionend事件完美解决上面的所有bug
并且兼容所有的IE版本
但是compositionend事件太新了,有很多未知的东西

所有最后选用input事件，但是要记住 中文输入有一个bug

3）拿到this.value 通过value获取数据

a，准备一个数据库（一个数组）

图片.png

b，搜索函数（传入keyword 结果返回数组）
函数的功能：查看数据库数组里面的每个字符串是否包含keyword字符串

完整字符串.indexOf(keyword)>=0 //则完成字符串里面包含keyword字符串

function search(keyword){
   var result=[]
   for(var i=0;i=0){
      result.push(gatherdata[i]) 
   }
  }
  return result//返回数组
 }

c，监听里面判断输入是否为空，不为空才搜索

图片.png

d，通过value得到包含value的一个数组结果

     $('input').on('input',function(){
              if(this.value){
              let words=search(this.value)
              let ul=document.querySelector('#suggesstion')
              ul.innerHTML=''
              for(var i=0;i

e，把同步改成异步
一般数据是通过后台获取，服务器一来一回需要时间，所以我们需要模拟这种需要时间的现象。
setTimeout()制造时间，形成异步景象
在异步的事件里返回值是没有意义的

图片.png

现在怎么办呢？
search没有返回值 那么得不到查询结果

解决办法：

图片.png

重要知识点：

同步改成异步把所有的返回值都通过函数来传递
通过函数的方式获取setTimeout里面的结果，在另外一个函数通过arguement的方式获取！！！

图片.png

代码