使用 UI 自动完成添加滚动到 Div 功能

Question

能否请您看一下This Demo，让我知道如何启用从自动完成滚动到所选项目的 div？

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
        $('html,body').animate({
               scrollTop: $("#"+ this.value).offset().top
         });
    }).change();
    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

但我收到此错误

未捕获的类型错误：无法读取未定义的属性“顶部”

Answer 1

代码在正确触发时工作。但只有当您输入与其中一个查找项的 id 匹配的值时才会正确触发。

根据 ID 选择器的Jquery documentation：

对于 id 选择器，jQuery 使用 JavaScript 函数 document.getElementById()，效率极高。

根据 MDN 的 document.getElementById 参数

• element 是对 Element 对象的引用，如果具有指定 ID 的元素不在文档中，则为 null。
• id 是一个区分大小写字符串，表示正在查找的元素的唯一 ID。

由于您的元素是使用 Proper Cased 字符串使用 id 定义的，并且由于 id 查找区分大小写，如果您为 Asp 元素输入 asp，它将返回 null 进行查找。

随后在null 上调用offset() 将返回undefined。由于undefined 没有top 属性，您会收到错误消息：

未捕获的类型错误：无法读取未定义的属性“顶部”

因此，解决方案是将您的 id 设置为某种情况并规范您的通话。例如，如果您使用小写，则：

$("#"+ this.value.toLower()).offset().top

或者更好的是做一些空检查等，以确保你在开始调用方法之前确实有一个项目：

function getOffset(id){
   if (this.value)
   {
      var matches = $("#"+ this.value.toLower());
      if (matches.length){
         return matches.offset().top;
      }
   }
   return 0;
}

scrollTop: getOffset(this.value);

Answer 2

change 事件不存在，因此您的代码不会被触发。你必须这样做：

$(document).ready(function () {
    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
        $('html,body').animate({
               scrollTop: $("#"+ this.value).offset().top
         });
    });
});

检查this demo。