|
|
|
Rank: Member
Groups: Registered
Joined: 5/27/2014
Posts: 32
|
How can I bind jQuery autocomplete with the element which has spellchecker. ArvindB ArvindB
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 8/13/2004
Posts: 2,667
Location: Canada
|
Just to let you know I am trying to figure this out for you. The difficulty is because our as you type box is an iframe, but I think it should be possible one way or another. -your feedback is helpful to other users, thank you!-your feedback is helpful to other users, thank you!
|
|
|
|
Rank: Member
Groups: Registered
Joined: 5/27/2014
Posts: 32
|
Thanks Jim, I am waiting for your reply. Even I tried this thing with some other tricks yesterday. But the suggestion list which appears after typing some words, is goes at top left corner of the screen. Because the respective input element is made invisible by your code. and your iframe is visible on top of it. ArvindB ArvindB
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 8/13/2004
Posts: 2,667
Location: Canada
|
FYI, it's 90% working, just having trouble with the cursor up/down for item selection (although mouse works). -your feedback is helpful to other users, thank you!-your feedback is helpful to other users, thank you!
|
|
|
|
Rank: Member
Groups: Registered
Joined: 5/27/2014
Posts: 32
|
The solution which i tried, I am not getting trouble in mouse up n down selection. but getting problem that, sometimes the suggestion list goes at top left corner. Your code hides the actual input element and shows iframe at same place, for the typing. What I have tried is, I am again make it visible but behind the iframe. so whenever user types something in iframe, the text goes to the input box and suggestion box appears just below iframe. But as I need to hide that Actual input element and show only when editing is required. Some times the actual element kept hidden by ur code and hence the suggestion box goes to the top left corner of window. Waiting for your research to finish. ArvindB ArvindB
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 8/13/2004
Posts: 2,667
Location: Canada
|
Arvind, I've boiled the problem down to a jsfiddle (works in Chrome not IE) http://jsfiddle.net/y8X94/3/ - have asked a question on jquery forum, hope to reach a solution shortly. If you have any idea how to move to next menu item, please let me know. -your feedback is helpful to other users, thank you!-your feedback is helpful to other users, thank you!
|
|
|
|
Rank: Member
Groups: Registered
Joined: 5/27/2014
Posts: 32
|
I have not tried with this way, still searching solution. ArvindB ArvindB
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 8/13/2004
Posts: 2,667
Location: Canada
|
Sorry I'm still no closer to the cursor issue, but I thought I'd share where I'm at in case it helps you; Code:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="a.rapidspellweb?t=r&n=RapidSpell-AYT.js"></script> <script> //cannot use jquery document ready because RapidSpell uses onload for initialization - it does not depend on jquery. //$(function () { var autocomplete_Onload = window.onload; var autocompleter; window.onload = function(){ if(typeof(autocomplete_Onload)=='function') autocomplete_Onload(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; autocompleter = $("#tags_IF").autocomplete({ source: availableTags, select: function (event, ui) { //$("#tags")[0].value = ui.item.value; rsw_getTBSFromID("tags", false).setContent(ui.item.value); } }); }; //This code is just for the CURSOR UP/DOWN workaround I was looking for. It doesn't do anything presently. function kd(e) { //$('#tags_IF').autocomplete('_on', 'keydown'); if (event.keyCode == 40) { // autocompleter.trigger("keydown", event) //autocompleter.trigger('keydown', event); //$('#tags_IF').autocomplete('_repeat', null, 1, event); //$('#tags_IF').trigger("next", event); var e = $.Event('keypress'); e.which = 40; // Character 'A' // $('#tags_IF').trigger("next", event); $('#tags_IF').trigger("keydown", e); // $('#tags_IF')[0].keydown(event); //$('#tags_IF').keypress(e); //$('#tags_IF').autocomplete('next'); //$('#tags_IF')[0].handle("next", e); // autocompleter._move(); } } </script> </head> <body> <form> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" type="text" onkeydown="kd()" onkeyup="$('#tags_IF').autocomplete('search', this.value)" > </div> </form> </body> </html> -your feedback is helpful to other users, thank you!-your feedback is helpful to other users, thank you!
|
|
|
|
Rank: Member
Groups: Registered
Joined: 5/27/2014
Posts: 32
|
Thx Jim, I am still searching for solution ArvindB ArvindB
|
|
|
|
Rank: Advanced Member
Groups: Administrators, Registered
Joined: 10/20/2004
Posts: 456
|
Arvind, here's a fully working sample. Sorry for the delay. Code: <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script src="a.rapidspellweb?t=r&n=RapidSpell-AYT.js"></script> <script type="text/javascript"> function cancelBubble(e) { var evt = e ? e : window.event; if (evt.stopPropagation) evt.stopPropagation(); if (evt.cancelBubble != null) evt.cancelBubble = true; } //cannot use jquery document ready because RapidSpell uses onload for initialization - it does not depend on jquery. //$(function () { var autocomplete_Onload = window.onload; var autocompleter; var autocomplete_workaround_active_item = 0; window.onload = function () { if (typeof (autocomplete_Onload) == 'function') autocomplete_Onload(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaX", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; autocompleter = $("#tags_IF").autocomplete({ source: availableTags, select: function (event, ui) { rsw_getTBSFromID("tags", false).setContent(ui.item.value); } }); $('#tags').on('keyup', rs_keyup); } function rs_keyup(e){ var menuItemCount = $('#tags_IF').autocomplete('widget').menu()[0].children.length; if (e.keyCode == 40) {//DOWN var ev = $.Event('keydown'); ev.which = 40; autocomplete_workaround_active_item = 1 + (autocomplete_workaround_active_item % menuItemCount); $('#tags_IF').autocomplete('widget').menu('focus', null, $('#tags_IF').autocomplete('widget').menu().find(".ui-menu-item:nth-child(" + autocomplete_workaround_active_item + ")")); cancelBubble(e); } else if (e.keyCode == 38) {//DOWN var ev = $.Event('keydown'); ev.which = 38; if (autocomplete_workaround_active_item-- == 0) autocomplete_workaround_active_item = menuItemCount; $('#tags_IF').autocomplete('widget').menu('focus', null, $('#tags_IF').autocomplete('widget').menu().find(".ui-menu-item:nth-child(" + autocomplete_workaround_active_item + ")")); cancelBubble(e); } else if (e.keyCode == 13) {//ENTER var ev = $.Event('keydown'); ev.which = 13; ev.target = $('#tags_IF').autocomplete('widget').menu().find(".ui-menu-item:nth-child(" + autocomplete_workaround_active_item + ")"); $('#tags_IF').autocomplete('widget').menu('select', ev); cancelBubble(e); } else { $('#tags_IF').autocomplete('search', rsw_getTBSFromID("tags", false).getContentText()); } } </script> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" type="text" > </div> Hopefully you will not have any difficulty with it, but let me know if you do. The code could use simplifying a bit, there are a lot of references to 'tags' ID that could be removed. Dan Wright Dan Wright
|
|
|
