Javascript jQuery autocomplete并不总是处理元素_Javascript_Jquery_Dom_Jquery Ui

Javascript jQuery autocomplete并不总是处理元素

javascript jquery dom jquery-ui

Javascript jQuery autocomplete并不总是处理元素,javascript,jquery,dom,jquery-ui,Javascript,Jquery,Dom,Jquery Ui,我正在尝试创建一个greasemonkey脚本（用于Opera），将自动完成添加到网页上的输入元素中，但它并没有完全起作用我首先让autocomplete插件工作： // ==UserScript== // @name autocomplete // @description autocomplete // @include * // ==/UserScript== // Add jQuery var GM_JQ = document.createEl

我正在尝试创建一个greasemonkey脚本（用于Opera），将自动完成添加到网页上的输入元素中，但它并没有完全起作用

我首先让autocomplete插件工作：

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

这可以在我的html页面上使用，但不能在和上使用（idem作为插件）

但是，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">

在第一个示例中，您正在等待jQuery加载，然后启动

letsJQuery

，然后调用

autocomplete

，但是您如何知道autocomplete已经完成加载呢？

如果您在jQuery ajax调用中加载autocomplete，然后，您可以在ajax调用的success:中添加自动完成功能

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

函数includeJS（jsPath）
{ 
var script=document.createElement（“脚本”）；
setAttribute（“type”、“text/javascript”）；
setAttribute（“src”，jsPath）；
document.getElementsByTagName（“head”）[0].appendChild（脚本）；
}; 
函数setAutocomplete（）
{ 
$（“输入[type='text']”）。自动完成（“http://mysite/jquery_autocomplete.php", {         
数据类型：“jsonp”，
解析：函数（数据）{
var rows=新数组（）；
对于（var i=0；i只需确保
您是否正在寻找opera内置的自动完成功能？如果您不确定我的意思，请转到设置->首选项->表单选项卡
在此选项卡上，您可以键入opera在您键入文本输入字段时自动建议的值。这有点限制（这可能就是您这样做的原因）但是大多数常用的东西都可以自动完成。我知道表单选项卡，但它确实有局限性。任何其他浏览器都内置了自动完成功能，但没有操作性。好问题，我发现Opera的“调试器”有点局限性，所以我将尝试其他方法来检查是否加载了自动完成。这是我的解决方案的一部分展示我在ajax调用中加载它的位置，然后在success:part中激活它（以及我这样做的原因）。您可以在ajax中加载jQuery.js，然后使用我在myother.js中为自动完成演示的另一种方法进行链接，按顺序放置它们。感谢您指出了正确的方向（事实上，autocomplete尚未加载），@mark作为链接的提示，如果您使用$.ajax，是否有必要将其添加到网页中？如document.createElement（'script'）；和document.getElementsByTagName（'head'）[0]。appendChild？是的，但我假设（可能是错误的）这些都包装在jquery包装器$（document）中。准备好了吗（function（）{//Your code here}）；除此之外，只需运行该函数即可将其“添加”到附加到该选择器的页面DOM中。至于javascript，我的理解是这样的：“加载并执行脚本”作为这里的第一个示例：因此它存在于页面中。假设包含了自动完成。添加了一个示例，以另一种不同的方式进行。（在该函数链中）只是一个注释：我没有编辑/更改您的自动完成代码，只是将其添加到我创建的函数中，以便保持您的状态。
//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">

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

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