SOURCE

var input = document.getElementById('input');
var listData = []; // 预设关键词检索内容
// 使用影子dom可能更合适，但兼容性差

// IE，对象属性发生变化时
input.addEventListener('propertychange', showDropDownList);
// 非IE，只针对value值
input.addEventListener('input', showDropDownList, false);
// 输入框失焦时
input.addEventListener('blur', closeDropDownList, false);
// 输入框聚焦时
input.addEventListener('focus', showDropDownList, false);

function getServerKeywordCon(value) {
  if(!value) {return}
  // 可以添加等待动画...
  
  // 向服务器请求关键词内容...
  var cb     = 'jQuery110209790267320132047_1516092464628';// 回调名如有更改
  var script = document.createElement('script');
  script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&json=1&p=3&sid=1433_13290_21078_17001_20929&req=2&csor=2&pwd=s&_=1516092464638&cb=' + cb;
  document.body.appendChild(script);
}

// 百度关键词回调处理函数
function jQuery110209790267320132047_1516092464628(data) {
  if(data && data.s) {
    keywordSearchDropDownList(input, data.s);
  }
}

function showDropDownList() {
  let value = this.value.trim();
  if(!value) {
    closeDropDownList()
  }
  // 关键词请求节流
  debounce(getServerKeywordCon(value), 250, true);
}

function closeDropDownList() {
  let dom = hasUlDropDownBox('ulDropDownBox');
  // 延迟200ms触发，避免下拉选择时优先触发输入框失焦事件
  setTimeout(() => {
    dom.innerHTML = '';
  }, 200);
}

function keywordSearchDropDownList(input, listData) {
  if(!isArrayData(listData)) {return};
	if(isDomNode(input)) {
    var width  = getStyle(input, 'width').replace('px',''),
        height = getStyle(input, 'height').replace('px',''),
    		dom    = hasUlDropDownBox('ulDropDownBox'),
        len    = listData.length,
        temp   = '';
    
    if(!dom) {
      dom    = document.createElement('ul');// 创建容器元素
      dom.id = 'ulDropDownBox';// 标记容器元素，以便检测
      // 样式设定控制容器位置
      dom.style['maxWidth']   = width + 'px';
      insertAfter(dom, input);// 在输入框后面插入下拉列表容器
    }

    for(let i = 0; i < len; i++) {
      temp += `<li title="${ listData[i] }">${ listData[i] }</li>`;
    }
    
    dom.innerHTML = temp;
    
    dom.addEventListener('click', function(e) {
      let target = e.target;
      if(target.tagName == 'LI') {
        input.value   = target.innerText;
        dom.innerHTML = '';
      }
    }, false);
  }
}

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
    args = arguments,
    later = function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args)
      }
    },
    callNow = immediate & !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {
      func.apply(context, args)
    }
  }
}

function isArrayData(data) {
  return (Object.prototype.toString.call(data) === '[object Array]');
}

function getStyle(ele, prop){
  return !document.defaultView ? ele.currentStyle[prop] : document.defaultView.getComputedStyle(ele)[prop];
}

function hasUlDropDownBox(id) {
  return document.getElementById(id);
}

function isDomNode(dom) {
  if(!dom) {return}
  let type = Object.prototype.toString.call(dom).match(/\[object (.*?)\]/)[1].toLowerCase();
  return (type.substr(0,4) === "html")
}

function insertAfter(newElement,targetElement) {
    let parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

<div class="input">
  <h3>百度关键词搜索功能</h3>
  <input id="input" type="text" placeholder="请输入关键词...">
</div>

body {
  background-color: #ccc;
}
input {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
}
#ulDropDownBox {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 85px;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #fff;
  text-align: left;
  box-shadow: inset 1px 1px #ccc, inset 1px -1px #ccc, inset -1px 1px #ccc, inset -1px -1px #ccc;
}
#ulDropDownBox li {
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: none;
}
#ulDropDownBox li:hover {
  background-color: #ccc;
}