Question

我为Firefox创建了以下Greasemonkey脚本，以帮助过滤Java API reference长列表中的类名：

// ==UserScript==
// @name        JDK API Doc helper problematic
// @version     1
// @namespace   Xolve
// @description Provides in place search for JDK API docs
// @include     http://docs.oracle.com/javase/7/docs/api/*
// @run-at document-end
// ==/UserScript==

var classNamesFrame;
var classNamesDoc;
var classNamesHash = {};
var timeoutId;

function textBoxTextChanged(ev)
{
    window.clearTimeout(timeoutId);
    console.log(ev.target.value);
    // For case insensitive comparision
    var query = String(ev.target.value).trim().toLowerCase();
    timeoutId = window.setTimeout(filterClassNames, 600, query);

}

function filterClassNames(query)
{
    if(query.length == 0) {
        for(k in classNamesHash) {
            classNamesHash[k].style.display = "";
        }
        return;
    }
    for(k in classNamesHash) {
        if(k.startsWith(query)) {
            console.log("setting to display: " + k);
            classNamesHash[k].style.display = "block";
        }
        else {
            classNamesHash[k].style.display = "none";
        }
    }
}

function init()
{
    // Find list of class names
    classNamesDoc = classNamesFrame.contentDocument;
    classNamesATags = classNamesDoc.getElementsByTagName("a");
    for(i = 0; i < classNamesATags.length; i++) {
        // For case insensitive comparision
        classNamesHash[classNamesATags[i].textContent.toLowerCase()] = classNamesATags[i];
    }

    // Add a text box
    var textBox = classNamesDoc.createElement("input");
    var body = classNamesDoc.getElementsByTagName("body")[0];
    var classListNode = body.getElementsByClassName("indexContainer")[0];
    body.insertBefore(textBox, classListNode);
    textBox.addEventListener("keyup", textBoxTextChanged);
}

classNamesFrame = document.getElementsByName("packageFrame")[0];
classNamesFrame.onload = init;

这是此脚本的作用

在列出类名的框架中添加一个文本框。呼叫是查询框。
创建所有类名的哈希值（转换为小写）到相应的DOM元素。
当用户在查询框中输入类名的前几个字符时，它循环遍历哈希键并将匹配元素的显示属性设置为“阻止”，并将非匹配元素的属性显示为“无”

问题

总会显示一些元素，例如AclEntry，Array等，不论查询框的内容如何，

Answer 1

这是因为例如有多个“AclEntry”链接。因此，当您首次将元素添加到classNamesHash数组时，它将覆盖第一个“AclEntry”链接和第二个，因为您使用的ID是相同的。

您需要为此ID附加一些独特的内容，然后由于您只是检查.startsWith以匹配它，它仍然可以正常工作。

例如：

for(i = 0; i < classNamesATags.length; i++) {
    // For case insensitive comparision
    classNamesHash[classNamesATags[i].textContent.toLowerCase() + '_' + i] = classNamesATags[i];
}

这会将_＃附加到数组中id的末尾，并且应该保持它们的唯一性，这样您就可以拥有AclEntry_34和AclEntry_35之类的东西。当您尝试过滤掉Acl *时，它将匹配两者。

相反，所有链接现在都在classNamesHash对象中，因此可以隐藏所有不匹配的链接。

显示设置为无的元素

1 个答案: