代码之家 › 专栏 › 技术社区 › RvdK

jQuery autocomplete并不总是处理元素

jquery-ui dom jquery javascript

RvdK · 技术社区 · 14 年前

我正在尝试创建一个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;
        },
    });
}

我看到了“testautocomplete”,但是使用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:

// ==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://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)

通过jqueryui的自动完成

// ==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
                            }
                        }))
                    }
                })
            }
        }); 
    });
}

3 回复 | 直到 14 年前

zincorp 14 年前

letsJQuery ,然后调用 autocomplete ,但如何知道“自动完成”已完成加载?

Mark Schultheiss 14 年前

如果在jqueryajax调用中加载autocomplete,那么可以在ajax调用的success:中添加autocomplete功能

    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
                }
    });

corymathews 14 年前

只是确定一下。。

在此选项卡上,您可以键入值,当您在文本输入字段中键入时,opera将自动建议这些值。这有点限制(这可能就是你这么做的原因),但是让大多数普通的东西自动完成。