Question

我正在尝试创建一个greasemonkey脚本（用于Opera），以便为网页上的输入元素添加自动完成功能，但它不能完全正常工作。

我首先使用自动完成插件工作：

// ==UserScript==
// @name           autocomplete
// @description    autocomplete
// @include        *
// ==/UserScript==

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

var GM_CSS = document.createElement('link');
GM_CSS.rel = 'stylesheet';
GM_CSS.href = 'http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

var GM_JQ_autocomplete = document.createElement('script');
GM_JQ_autocomplete.type = 'text/javascript';
GM_JQ_autocomplete.src = 'http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js';
document.getElementsByTagName('head')[0].appendChild(GM_JQ_autocomplete);

// Check if jQuery's loaded
function GM_wait() 
{
    if(typeof window.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    }
    else 
    { 
        $ = window.jQuery; 

        letsJQuery(); 
    }
}
GM_wait();

function letsJQuery() 
{
    $("input[type='text']").each(function(index)
    {
        $(this).val("test autocomplete");
    });

    $("input[type='text']").autocomplete("http://mysite/jquery_autocomplete.php", {
        dataType: 'jsonp',
        parse: function(data) {
            var rows = new Array();
            for(var i=0; i<data.length; i++){
                rows[i] = { 
                    data:data[i], 
                    value:data[i], 
                    result:data[i] };
            }
            return rows;
        },
        formatItem: function(row, position, length) {
            return row;
        },
    });
}

我看到'测试自动完成'但是使用Opera调试器（firefly）我没有看到任何与我的php页面的通信。（是的，mysite是虚构的，但它可以在这里工作）在我自己的页面上尝试：

<body>
no autocomplete: <input type="text" name="q1" id="script_1"><br>
autocomplete on: <input type="text" name="q2" id="script_2" autocomplete="on"><br>
autocomplete off: <input type="text" name="q3" id="script_3" autocomplete="off"><br>
autocomplete off: <input type="text" name="q4" id="script_4" autocomplete="off"><br>
</body>

这样可行，但在尝试其他页面时，它有时不会：例如http://spitsnieuws.nl/和http://dumpert.nl工作，但http://nu.nl和http://armorgames.com不起作用。编辑：两者都给

未捕获的异常：TypeError： '$（ “输入[类型= '文本']”）。自动完成' 不是一个功能

尝试jquery ui的自动完成有更多问题：

// ==UserScript==
// @name           autocomplete
// @description    autocomplete
// @include        *
// ==/UserScript==

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

var GM_CSS = document.createElement('link');
GM_CSS.rel = 'stylesheet';
GM_CSS.href = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

var GM_JQ_autocomplete = document.createElement('script');
GM_JQ_autocomplete.type = 'text/javascript';
GM_JQ_autocomplete.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js';
document.getElementsByTagName('head')[0].appendChild(GM_JQ_autocomplete);

// Check if jQuery's loaded
function GM_wait() 
{
    if(typeof window.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    }
    else 
    { 
        $ = window.jQuery; 

        letsJQuery(); 
    }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() 
{
    $("input[type='text']").each(function(index)
    {
        $(this).val("test autocomplete");
    });

    $("input[type='text']").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://mysite/jquery_autocomplete.php",
                dataType: "jsonp",
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item,
                            value: item
                        }
                    }))
                }
            })
        }
    });
}

这适用于我的html页面http://spitsnieuws.nl和http://dumpert.nl，但不适用于http://nu.nl和http://armorgames.com（同上即插件）

然而，nu和armorgames的错误现在是：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
Declaration syntax error

Line 18:
   100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0);
  --------------------------------------------------------------------------------^

输入元素：

//http://spitsnieuws.nl
<input class="frmtxt ac_input" type="text" id="zktxt" name="query" autocomplete="off">
//http://dumpert.nl
<input type="text" name="srchtxt" id="srchtxt">
//http://nu.nl
<input id="zoekfield" name="q" type="text" value="Zoek nieuws" onfocus="this.select()" type="text">
//http://armorgames.com
<input type="text" name="search" value="" class="search">

任何人都知道为什么自动完成功能不起作用？为什么没有对php页面的请求？为什么我无法将自动填充功能添加到google.com？

编辑：添加了armorgames和错误消息

答案

我发现我还应该检查autocomplete.js是否已加载（而不仅仅是jquery.js）

使用jQuery UI的自动完成

// ==UserScript==
// @name           autocomplete
// @description    autocomplete
// @include        *
// ==/UserScript==

// Add jQuery

var GM_CSS = document.createElement('link');
GM_CSS.type = 'text/css';
GM_CSS.rel = 'stylesheet';
GM_CSS.href = 'http://mysite/jquery/development-bundle/themes/ui-lightness/jquery.ui.all.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

function includeJS(jsPath) 
{ 
    var script = document.createElement("script"); 
    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", jsPath); 
    document.getElementsByTagName("head")[0].appendChild(script); 
}; 

includeJS("http://mysite/jquery/development-bundle/jquery-1.4.2.js");
includeJS("http://mysite/jquery/development-bundle/ui/jquery.ui.core.js");
includeJS("http://mysite/jquery/development-bundle/ui/jquery.ui.widget.js");
includeJS("http://mysite/jquery/development-bundle/ui/jquery.ui.position.js");

// Check if jQuery's loaded
function GM_wait() 
{
    if(typeof window.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    }
    else 
    { 
        $ = window.jQuery; 

        letsJQuery(); 
    }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() 
{
    $("input[type='text']").each(function(index)
    {
        $(this).val("test autocomplete");
    });

    //wait till script is loaded
    $.getScript("http://mysite/jquery/development-bundle/ui/jquery.ui.autocomplete.js", function(){
        //using remote data from other domain using JSONP
        $("input[type='text']").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "http://mysite/jquery_autocomplete.php",
                    dataType: "jsonp",
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item,
                                value: item
                            }
                        }))
                    }
                })
            }
        }); 
    });
}

Answer 1

在第一个示例中，您正在等待jQuery加载，然后触发letsJQuery，然后调用autocomplete，但您怎么知道自动完成已完成加载？

Answer 2

如果在jquery ajax调用中加载自动完成，则可以在成功中添加自动完成功能：ajax调用

    function includeJS(jsPath) 
    { 
        var script = document.createElement("script"); 
        script.setAttribute("type", "text/javascript"); 
        script.setAttribute("src", jsPath); 
        document.getElementsByTagName("head")[0].appendChild(script); 
    }; 


function setAutocomplete()
    { 
    $("input[type='text']").autocomplete("http://mysite/jquery_autocomplete.php", {         
            dataType: 'jsonp',         
            parse: function(data) {         
                var rows = new Array();         
                for(var i=0; i<data.length; i++){         
                    rows[i] = {          
                        data:data[i],          
                        value:data[i],          
                        result:data[i] };         
                }         
                return rows;         
            },         
            formatItem: function(row, position, length) {         
                return row;         
            }         
        });         
    };
    $.ajax({ 
          url: "http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js", 
          dataType: 'script', 
          cache: true, 
          success:  function(){
                  setAutocomplete();
                  includeJS('js/myother.js'); //another example of loading one on demand
                }
    });

Answer 3

确保..

你不是在寻找歌剧所建造的自动完成吗？如果您不确定我的意思，请转到设置 - ＆gt;偏好 - ＆gt;表格标签

在此选项卡上，您可以键入在键入文本输入字段时将自动建议的opera值。它有点限制（这可能是你这样做的原因）但是大部分常见的东西都是自动完成的。

jQuery自动完成并不总是在处理元素

答案

3 个答案: