Javascript 文本输入在用户键入时撤消silentScroll并重置其位置

我目前正在开发Cordova移动应用程序。我有一个本地数据库，使用brodybits的sqlite插件，用于cordova，其中包含我想在应用程序中显示的数据。用户可以从2个选择列表中选择和/或在搜索字段中键入

我想要的是：当用户在搜索框内按下时，应用程序的视图向下滚动，以便用户在键入查询时立即看到结果

小提琴显示了我想要它做什么：

提交输入的代码：

<input type="text" name="input" id="input" size="30" value="" class="text-input" placeholder="Search items" data-clear-btn="true" onclick="$.mobile.silentScroll(160)"/>

问题是：每当用户在搜索框内键入内容或从搜索框中删除内容时，页面就会自动跳回

不幸的是，我遇到的问题无法在这个小提琴上看到，因为它只在调用本地数据库时发生。当我在index.js的第7行对其进行注释时，问题并没有出现。显然，对我来说，忽略数据库调用并不是一个解决方案，因为它包含了应用程序运行所需的所有数据

数据库调用代码：

function queryDatabase() {

            var outputListview = document.querySelector("#outputListview");
            var where = '';


            if (itemsearch && $("#itemsearch").prop('selectedIndex') != 0) {
                where += 'AND table.name LIKE ("%' + itemsearch + '%")';
            }


            db.transaction(function (tx) {
                tx.executeSql('SELECT table.name FROM table WHERE table.name IS NOT NULL '+where, [], function (tx, results) {

                    var len = results.rows.length;

                    var createUnorderedListElem = document.createElement("ul");

                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            var createListItem = document.createElement("li");
                            createListItem.textContent = results.rows.item(i)['name'];
                            createUnorderedListElem.appendChild(createListItem);
                        }
                    }

                    outputListview.appendChild(createUnorderedListElem);
                });
            });
        }

我知道这很混乱，我是新手，但检索正确的输出效果绝对不错。当然，除了在搜索字段中键入时，页面会再次跳回顶部的silentScroll前位置，而不是在silentScroll后保持静止

我猜，每当用户激活键盘，向查询添加字符或从查询中删除字符时，应用程序都会刷新页面，这是一个问题。但我不知道该怎么办

我发现这似乎与我的问题相似，尽管不完全相同。一位评论者建议从库文件中编辑掉这个位，这对我没有帮助

我希望我的帖子足够清晰，任何人都知道是什么原因造成的和/或我可以尝试解决的问题。提前谢谢

编辑：由于某种原因，在我的HTML中添加了一个滑块之后，跳回顶部的问题似乎已经停止了。这说明了我的意思。当我删除此元素时，问题再次开始出现。但我仍然想知道是什么导致了这种情况，以及如何防止它，因为我可能会在以后重新安排这些元素

我还尝试将onclick=$.mobile.silentcroll160替换为onclick=$.mobile.silentcroll$'zoekmerknaam'.offset.top，但问题仍然存在

---

也许这些新信息会给某些人带来一些启示？

根据你的描述，我制作了一个简单的网站来复制这个问题，但没有成功。你能发布queryDatabase函数代码吗？@GjermundDahl我已经在你请求的代码中添加了，尽管匿名。我希望它有用。谢谢你试图帮助我：可能是onclick事件。您可以尝试用标准的jQuery绑定替换它，如$input.focusfunctione{$.mobile.silentScroll160；}检查我上面提供的链接中的源代码。@Gjermundahl感谢您的建议，但不幸的是，它给了我完全相同的结果：今天很忙，很抱歉延迟评论。这可能是服务器返回的html代码中的错误吗？如果将queryDatabase替换为outputListview.AppendChild等有效代码，会发生什么情况

function queryDatabase() {

            var outputListview = document.querySelector("#outputListview");
            var where = '';


            if (itemsearch && $("#itemsearch").prop('selectedIndex') != 0) {
                where += 'AND table.name LIKE ("%' + itemsearch + '%")';
            }


            db.transaction(function (tx) {
                tx.executeSql('SELECT table.name FROM table WHERE table.name IS NOT NULL '+where, [], function (tx, results) {

                    var len = results.rows.length;

                    var createUnorderedListElem = document.createElement("ul");

                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            var createListItem = document.createElement("li");
                            createListItem.textContent = results.rows.item(i)['name'];
                            createUnorderedListElem.appendChild(createListItem);
                        }
                    }

                    outputListview.appendChild(createUnorderedListElem);
                });
            });
        }