jQuery autocomplete not always working on elements
- by PoweRoy
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/ works but http://nu.nl and http://dumpert.nl don't work.
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. (dumpert didn't work on the plugin autocomplete)
//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">
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?
