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);
    });
});

但我收到此错误

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

Answer 1

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

根据ID选择器的Jquery documentation：

对于id选择器，jQuery使用JavaScript函数 document.getElementById（），这是非常有效的。

根据MDN对于document.getElementById参数

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

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

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

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

因此，解决方案是将您的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。

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

2 个答案: