|
jQuery UI
includes autocomplete functionality through its .autocomplete() widget.
The autocomplete textbox can be as-you-type spell check enabled with RapidSpell
Web ASP.NET, and some small code changes/additions.
The below
code is a working example, but you will need to modify the path to the RapidSpell-AYT.js
script to match where it resides in your web application.
The code
works by activating autocomplete on the RapidSpell IFRAME element and manually
handling key events to trigger autocomplete.
<!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">
<!--cdn-->
<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="/Scripts/RapidSpell-AYT.js"
type="text/javascript"></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>
</head>
<body>
<form>
<div
class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" type="text"
onkeyup="$('#tags_IF').autocomplete('search', this.value)" >
</div>
</form>
</body>
</html>
|