CODEWITHSUNDEEP
javascriptjquerydomjquery-ui
RvdK
RvdK

Reputation: 19800

jQuery autocomplete not always working on elements

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

I first got the autocomplete plugin working:

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

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

<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>

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.com don't work. EDIT: Both give

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

Trying the autocomplete of jquery ui has more problems:

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

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

However the error on nu and armorgames is now:

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

The input elements:

//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">

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

Edit: Added armorgames and error messages

Answer

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

With the autocomplete of 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
                            }
                        }))
                    }
                })
            }
        }); 
    });
}

Upvotes: 2

Views: 5796

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34217

If you load the autocomplete in a jquery ajax call, you could then add the autocomplete 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 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
                }
    });

Upvotes: 3

corymathews
corymathews

Reputation: 12619

Just making sure..

Your not looking for the auto-complete 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 common stuff to auto-complete.

Upvotes: 0

zincorp
zincorp

Reputation: 3282

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

Upvotes: 3

Related Questions