今天在做开发的时候，遇到了一个比较奇葩的情况，有一个表单，里面有多个input，大家都知道默认的input都是带有自动填充的功能的，之前项目一直运行的挺好，后来莫名奇妙的这个表单里其中一个input的自动填充就不能用了，后来我检查了一遍，因为在我的记忆里，这个页面的前端我没动过，但是就是莫名奇妙的这个input不能自动填充了，后来百度了一会，发现搜出来的结果都是说怎么禁止让浏览器自动填充，没一个是我需要的回答，然后autocomplete autocomplete="on" 也都试了，name值也是有的，就是不出来看，这就给我整郁闷了，然后各种qq群问也没个正经的回答，最后一赌气直接从数据库查吧，也希望知道原因的大佬指点指点我qq：1687105521

然后也顺便分享一下从数据库获取上一条数据的思路吧!

因为要模拟正常浏览器自动填充的效果，所以做完这个感觉前端还挺有意思的，主要是用的jq，vue的大佬就别看了。

// 因为商品名称input死活不能自动填充所以从后台获取
let titleInput = $('input[name="title"]')
  ,  titleHistory = $('.title-history')
  , titleHistoryText = $('.title-history-text')
  , ogTitle = titleInput.val();
if (!ogTitle){
 // 获得焦点时
 titleInput.on('focus', function (){
  if (!titleInput.val()){
   $.post("{:url('manage/Aut/getLastTitleByUID')}", {}, function (res){
    if (res.code === 200){
     titleHistory.show();
     titleHistoryText.html(res.data.title);
    }
   })
  }
 });
 titleHistoryText.on('click', function (){
  let text = $(this).html();
  titleInput.val(text);
 });
 // 正在输入时
 titleInput.on('input', function (){
  titleHistory.hide();
 });
 // 失去焦点时
 titleInput.on('blur', function (){
  setTimeout(function (){
   titleHistory.hide();
  }, 300);
 });

}else{
 titleHistory.hide();
}

这里有意思的一点是，因为模拟浏览器自动填充的效果，所以当我们点击下拉框中的值之后，下拉框要立即隐藏，所以我在blur监听的时候是直接执行隐藏操作的，但是这样就不能监听到点击这个操作，意思就是，失去焦点和点击监听是有冲突的，所以我在失去焦点的监听时，做了一个300毫秒的延时隐藏，因为你立即隐藏的话就相当于你这个dom已经隐藏掉了，所以你根本点击不到这个dom，所以你就监听不到这个点击事件，这样延时隐藏后，这个点击就能被监听到了，后面的操作就简单了直接将值赋值到input里，好了今天就分享到这里!