Question

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

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

小提示显示我想要它要做的事情： https://jsfiddle.net/ppvvfws1/1

提交输入的代码：

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

将代码绑定到keyup的代码：

var itemsearch = "";
$("#input").unbind();
$(function() {
            $("#input").keyup(function(e) {
                itemsearch = $("input#input").val(); 
                // queryDatabase uses the value of itemsearch to find items in the database that resemble its value
                queryDatabase();
            })
        });

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

不幸的是，虽然我在这个小提琴上看不到问题，因为它只发生在调用（本地）数据库时。当我评论它（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);
                });
            });
        }

我知道它很乱，我是新手，但它可以完全正确地检索正确的输出。当然，除了在搜索字段中键入内容时，页面再次跳回到顶部（pre-silentScroll位置）而不是保持静止（后静默滚动位置）。

我猜每当用户激活键盘时，应用刷新页面就会出现问题，无论是在查询中添加字符还是从查询中删除字符。但我不知道该怎么做。

我发现this discussion似乎与我的问题相似，尽管不完全一样。并且从评论者建议的库文件中编辑出来的位对我没有帮助。

我希望我的帖子足够清楚，并且任何人都有任何想法可能导致它和/或我可以尝试解决它。提前谢谢。

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

我也尝试用onclick="$.mobile.silentScroll(160)"替换onclick=" $.mobile.silentScroll($('#zoekmerknaam').offset().top)，但问题仍然存在。

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

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

0 个答案: