首页
前端开发
Javascript
JavaScript仿百度输入框自动提示

JavaScript仿百度输入框自动提示

0 次浏览 0 条评论
doc
doc

仿百度的输入框自动提示功能，是那种用了就回不去的小妙招。输入几个字，下面立马蹦出一堆相关选项，响应也快，体验也舒服。整个实现其实不复杂，主要靠一点JavaScript搞定定位，再用Ajax拉数据，UI 那块就用个隐藏的div随时显现。

布局上你只需要一个position: absolute的提示框div，平时隐藏，需要时动态调整位置和宽度，正好贴在输入框下边，体验感满分。

定位这块有点门道，用一个函数递归取offsetParent，就能拿到输入框在页面上的绝对位置，更新提示框的top和left，不管输入框在哪儿都能对得上。

监听用户输入嘛，定时器+对比值就行了。每 200ms 检查一次内容有没有变，变了就发Ajax求去拉新数据，更新提示框，用户根本感觉不到延迟。

function checkValue() {
  var nowValue = document.getElementById('sendername').value;
  if (preValue !== nowValue) {
    ajax.call('useradv.php?act=getsendername&;name=' + nowValue, '', getResponse, 'GET', 'json');
  }
  preValue = nowValue;
  setTimeout(checkValue, 200);
}

想再优化？加个延迟判断，比如用户停下 500ms 再发求，既省资源又稳；加点键盘事件，支持方向键选项、回车选中，交互感更强；安全上，别忘了后端做SQL 注入防护，别光信前端。

，这种提示功能，适合搜索框、联系人输入、表单填报这些场景。你用一次，用户体验就上一个台阶。对了，想看下完整例子或者变种的实现，可以去这些地方瞅瞅：

如果你页面上有搜索功能，不妨加上它试试，用户操作会更顺手。

doc 文件大小：50.5KB