admin管理员组文章数量:1336398
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
}
}))
}
})
}
});
});
}
3 Answers
Reset to default 3In 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.
本文标签： javascriptjQuery autocomplete not always working on elementsStack Overflow
版权声明：本文标题：javascript - jQuery autocomplete not always working on elements - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742335788a2455596.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论