滚动到输入 ID 的 JavaScript 搜索栏答案

【问题标题】：JavaScript Search Bar that Scrolls to input ID滚动到输入 ID 的 JavaScript 搜索栏
【发布时间】：2015-07-13 20:28:30
【问题描述】：

我是 JavaScript 新手，目前我仍在学习它。

我正在尝试创建一个搜索栏，当用户输入项目名称（例如项目 5）时，搜索栏将根据输入和 Div 的标签滚动到项目。我正在处理的网站是一长串项目，客户通常知道他们在寻找什么。

我已经看到很多关于如何让 Button 滚动到 Div 的示例，但关于如何在搜索栏中设置输入以滚动到 Div 的例子并不多。

如果滚动方法很流畅，那就太好了。我希望它基于他们输入的数值。因此，如果它是一个字符串，例如“10.01A Paper”，我希望它将其转换为 1001A”，这将是 div命名。<Div ID=1001A> 这样有意义吗？

任何建议都会很棒！

这是Demo

<form id="searchbox" action="">
<input id="search" type="text" placeholder="Type here">
<input id="submit" type="submit" value="Search">

项目 1 第 2 项第 3 项第 4 项

.space {
    width:100%;
    height:500px;
    background-color:#FFF;
}

【问题讨论】：

您需要更具体地了解预期的行为。用户是否必须输入项目的全名才能工作？前缀？子串？
.. 是平滑滚动还是跳跃？
滚动方式如果流畅就好了。我希望它基于它们放置的数字值。因此，如果它是一个字符串，例如“10.01A Paper”，我希望它将其转换为 1001A”，这将是 div命名？这有意义吗？
我假设使用 toUpperCase() 将字符串转换为所有大写字母，但我希望它主要能够确定项目编号是什么。所有商品的产品编号开头都有一个数值，这也是他们选择订购商品的方式。
如果你错过了，我已经用简单易行的方法添加了答案，而且它也很流畅。

标签： javascript html css

【解决方案1】：

这样的事情可能会起作用jsfiddle：

var searchButton = document.getElementById('submit'),
    searchText   = document.getElementById('search');

// the text property is what the search input is compared against
// once a match is found, the id property is used to lookup the element
var items = [
    { text: 'Item 1', id: 'item1' },
    { text: 'Item 2', id: 'item2' },
    { text: 'Item 3', id: 'item3' },
    { text: 'Item 4', id: 'item4' }
];

function searchForItem(query) {
    for (var i = 0; i < items.length; i++) {
        if (items[i].text.indexOf(query) !== -1) {
            return document.getElementById(items[i].id);
        }
    }
}

searchButton.addEventListener('click', function () {
    var query = searchText.value,
        item  = searchForItem(query);
    if (typeof item !== 'undefined') {
        item.scrollIntoView();
    }
});

html:

<input id="search" type="text" placeholder="Type here"/>
<input id="submit" type="button" value="Search" />


<div id="item1" class="space">Item 1</div>
<div id="item2" class="space">Item 2</div>
<div id="item3" class="space">Item 3</div>
<div id="item4" class="space">Item 4</div>

【讨论】：

【解决方案2】：

这就是你想要的，玩得开心。 https://jsfiddle.net/gkehnkdk/2/

动画在线条中：

$('html,body').animate({
    scrollTop: $(this).offset().top
});

我已经做到了，所以您必须输入您正在搜索的项目的“id”。但是您可以将代码更改为检查其文本之类的内容。现在由您决定。

在我看来这是最简单最简单的解决方案，也很流畅。

按用户要求编辑

要从字符串中删除点，只需添加

myString.replace(/\./g, "");

在字符串之后。

工作小提琴： https://jsfiddle.net/gkehnkdk/6/

【讨论】：

非常感谢。这很好用。如果用户键入“10.01A”，那么输入将忽略“。”的好方法是什么？只需寻找“1001A”？
字符串操作。更换。用一个空字符串，然后使用它的结果。
查看我正在重新设计的网站后，我注意到每个项目标题都包含在“跨度”标签中。 20.01B 如何修改此脚本以在“跨度”标签中找到“字符串”。在本例中为 20.01B。
请把你的代码贴在小提琴里，如果你只是复制粘贴到这里，阅读起来太混乱了。
现在它会 ScrollTo 到 Span ID。我怎样才能让它滚动到 Span ID 中的内容。（例如第 1 项）

【解决方案3】：

让浏览器滚动到给定元素的最基本方法是使用 URL 的哈希部分导航到元素的 ID。

考虑到这一点，试试这个 javascript：

window.onload = function() {
    document.getElementById('searchbox').onsubmit = function() {
          document.location.href = '#'+document.getElementById('search').value;
          return false;
    };
};

它的作用是“hijacks”表单的默认功能，而不是以常规方式提交表单，它只是更改 URL 并导航到 # + 您输入的字符串。

因此，输入“item1”将导致浏览器导航到#item1，这将使浏览器向下滚动到 ID 为 item1 的任何元素，依此类推。

要平滑滚动，您需要使用 Javascript 自己实现滚动。有许多可用的脚本，主要取决于 jQuery。

请看这里：http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

【讨论】：