javascript - jQuery autocomplete not always working on elements

I'm trying to create a greasemonkey script (for Opera) to add autoplete to input elements found on a webpage but it's not pletely working.

I first got the autoplete plugin working:

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

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = '.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 = '.autoplete.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

var GM_JQ_autoplete = document.createElement('script');
GM_JQ_autoplete.type = 'text/javascript';
GM_JQ_autoplete.src = '.autoplete.js';
document.getElementsByTagName('head')[0].appendChild(GM_JQ_autoplete);

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

    $("input[type='text']").autoplete("http://mysite/jquery_autoplete.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;
        },
    });
}

I see the 'test autoplete' but using the Opera debugger(firefly) I don't see any munication to my php page. (yes mysite is fictional, but it works here) Trying it on my own page:

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

This works, but when trying on another pages it sometimes won't: e.g. / and work but and don't work. EDIT: Both give

Uncaught exception: TypeError: '$("input[type='text']").autoplete' is not a function

Trying the autoplete of jquery ui has more problems:

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

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = '.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 = '.8/themes/base/jquery-ui.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

var GM_JQ_autoplete = document.createElement('script');
GM_JQ_autoplete.type = 'text/javascript';
GM_JQ_autoplete.src = '.8/jquery-ui.min.js';
document.getElementsByTagName('head')[0].appendChild(GM_JQ_autoplete);

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

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

This will work on my html page, and but not on and (idem as plugin)

However the error on nu and armorgames is now:

.8/themes/base/jquery-ui.css
Declaration syntax error

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

The input elements:

//
<input class="frmtxt ac_input" type="text" id="zktxt" name="query" autoplete="off">
//
<input type="text" name="srchtxt" id="srchtxt">
//
<input id="zoekfield" name="q" type="text" value="Zoek nieuws" onfocus="this.select()" type="text">
//
<input type="text" name="search" value="" class="search">

Anyone know why the autoplete functionality doesn't work? Why the request to the php page is not being made? And why I can't add my autoplete to google?

Edit: Added armorgames and error messages

Answer

Well I found out that I also should check if autoplete.js has loaded (instead of only jquery.js)

With the autoplete of jQuery UI

// ==UserScript==
// @name           autoplete
// @description    autoplete
// @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 autoplete");
    });

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

I'm trying to create a greasemonkey script (for Opera) to add autoplete to input elements found on a webpage but it's not pletely working.

I first got the autoplete plugin working:

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

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery./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./view/trunk/plugins/autoplete/jquery.autoplete.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

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

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

    $("input[type='text']").autoplete("http://mysite/jquery_autoplete.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;
        },
    });
}

I see the 'test autoplete' but using the Opera debugger(firefly) I don't see any munication to my php page. (yes mysite is fictional, but it works here) Trying it on my own page:

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

This works, but when trying on another pages it sometimes won't: e.g. http://spitsnieuws.nl/ and http://dumpert.nl work but http://nu.nl and http://armorgames. don't work. EDIT: Both give

Uncaught exception: TypeError: '$("input[type='text']").autoplete' is not a function

Trying the autoplete of jquery ui has more problems:

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

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.googleapis./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./ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css';
document.getElementsByTagName('head')[0].appendChild(GM_CSS);

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

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

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

This will work on my html page, http://spitsnieuws.nl and http://dumpert.nl but not on http://nu.nl and http://armorgames. (idem as plugin)

However the error on nu and armorgames is now:

http://ajax.googleapis./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);
  --------------------------------------------------------------------------------^

The input elements:

//http://spitsnieuws.nl
<input class="frmtxt ac_input" type="text" id="zktxt" name="query" autoplete="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.
<input type="text" name="search" value="" class="search">

Anyone know why the autoplete functionality doesn't work? Why the request to the php page is not being made? And why I can't add my autoplete to google.?

Edit: Added armorgames and error messages

Answer

Well I found out that I also should check if autoplete.js has loaded (instead of only jquery.js)

With the autoplete of jQuery UI

// ==UserScript==
// @name           autoplete
// @description    autoplete
// @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 autoplete");
    });

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

Share Improve this question edited Jun 23, 2010 at 14:28 asked Jun 15, 2010 at 8:51 RvdK 19.8k5 gold badges67 silver badges110 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

In the first example, you're waiting for jQuery to load and then firing off letsJQuery, which then calls autoplete, but how do you know that autoplete has finished loading?

If you load the autoplete in a jquery ajax call, you could then add the autoplete functionality within the success: of the ajax call

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


function setAutoplete()
    { 
    $("input[type='text']").autoplete("http://mysite/jquery_autoplete.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./view/trunk/plugins/autoplete/jquery.autoplete.js", 
          dataType: 'script', 
          cache: true, 
          success:  function(){
                  setAutoplete();
                  includeJS('js/myother.js'); //another example of loading one on demand
                }
    });

Just making sure..

Your not looking for the auto-plete that opera has built in correct? If you are unsure what I mean go to settings -> preferences -> forms tab

On this tab you can type in values which opera will auto suggest when you type into text input fields. Its a bit limiting(which might be why you are doing this) but gets the majority of the mon stuff to auto-plete.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742335789a4424621.html

javascript - jQuery autocomplete not always working on elements - Stack Overflow

Answer

Answer

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - jQuery autocomplete not always working on elements - Stack Overflow

Answer

Answer

3 Answers 3

相关推荐