I need to make a column where you can select grid rows with input:checkbox. Grids like ones used by Yahoo, Google etc have something like that.
I made something but I have some problems and I think that is not a good aproach also.
It's posible to have checkboxes in rows and click on them directly, not like in example4-model ?
My idea was :
< div id="inlineFilterPanel" class="slick-header-column" style="padding: 3px 0; color:black;">
<input type="checkbox" name="selectAll" id="selectAll" value="true" / >
< input type="text" id="txtSearch2" value="Desktops" />
</div>
d["check"] = '< INPUT type=checkbox value='true' name='selectedRows[]' id='sel_id_<?php echo $i; ?>' class='editor-checkbox' hideFocus />';
grid.onSelectedRowsChanged = function() {
selectedRowIds = [];
$('#myGrid' + ' :checkbox').attr('checked', '');
var rows = grid.getSelectedRows();
for (var i = 0, l = rows.length; i < l; i++) {
var item = dataView.rows[rows[i]];
if (item) {
selectedRowIds.push(item.id);
$('#sel_' + item.id).attr('checked', 'checked');
}
}
};
function selectAllRows(bool) {
var rows = [];
selectedRowIds = [];
for (var i = 0; i < dataView.rows.length; i++) {
rows.push(i);
if (bool) {
selectedRowIds.push(dataView.rows[i].id);
$('#sel_' + dataView.rows[i].id).attr('checked', 'checked');
} else {
rows = [];
$('#sel_' + dataView.rows[i].id).attr('checked', '');
}
}
grid.setSelectedRows(rows);
}
grid.onKeyDown = function(e) {
// select all rows on ctrl-a
if (e.which != 65 || !e.ctrlKey)
return false;
selectAllRows(true);
return true;
};
$("#selectAll").click(function(e) {
Slick.GlobalEditorLock.cancelCurrentEdit();
if ($('#selectAll').attr('checked'))
selectAllRows(true);
else
selectAllRows(false);
return true;
});
Thanks!
I've added a sample implementation of a checkbox select column to http://mleibman.github.com/SlickGrid/examples/example-checkbox-row-select.html
This is part of the upcoming 2.0 release.
Related
I have tried a pagination to display my accounts. The issue I found with the below code is when i click on 2, the list is iterating and display one more array list. At first, it looks 1 2 3 4 5 when i click on any number it displays as 1 2 3 4 2 3 4 5 and on another click 1 2 3 4 2 3 4 2 3 4 5. Basically, it displays the arraylist one more to the original one.
html:
<template>
<lightning-card title="Pagination on Account">
<div class="slds-var-m-around_medium">
<template if:true={showAccounts}>
<template for:each={showAccounts} for:item="a">
<p key={a.Id}>{a.Name}</p>
</template>
</template>
</div>
<lightning-layout>
<lightning-layout-item padding="around-small" flexibility="auto">
<div class="slds-grid slds-wrap">
<lightning-button icon-name="utility:chevronleft" icon-position="left" onclick={prev}></lightning-button>
<span class="slds-p-horizontal_x-small" title="Display">
<a onclick={processMe} name="1"
class={displayPageNumber}>1</a>
</span>
<template for:each={pageList} for:item="item">
<div key={item.Id}>
<span class="slds-p-horizontal_x-small" title="DisplayMore">
<a onclick={processMe} name={item}
class={displaymore}>{item}</a>
</span>
</div>
</template>
<span class="slds-p-horizontal_x-small" title="Display">
<a onclick={processMe} name={totalPage}
class={displayTotalPage}>{totalPage}</a>
</span>
<lightning-button icon-name="utility:chevronright" icon-position="right" onclick={next}></lightning-button>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
.js
import { LightningElement,wire,track } from 'lwc';
import getAccounts from '#salesforce/apex/PaginationonAccounts.getAccounts';
export default class PaginationonAccounts extends LightningElement {
totalAccounts;
currentPageNumber = 1;
showAccounts;
pageSize = 10;
pageList = [];
item;
totalPage = 0;
#wire(getAccounts)
wiredAccounts({data,error}) {
if(data)
{
this.totalAccounts = data;
console.log('Total Accounts',this.totalAccounts);
this.totalPage = Math.ceil(data.length/this.pageSize);
this.currentPageNumber = 1;
this.buildData();
}
}
prev(event)
{
if(this.currentPageNumber > 1)
{
console.log('Previous');
this.currentPageNumber = this.currentPageNumber-1;
this.buildData();
}
}
processMe(event)
{
console.log('Process me');
this.currentPageNumber = parseInt(event.target.name);
console.log('Process me Page Number',this.currentPageNumber);
this.buildData();
}
next(event)
{
if(this.currentPageNumber < this.totalPage)
{
this.currentPageNumber = this.currentPageNumber+1;
this.buildData();
}
}
//to display pageNumbers
get displayPageNumber()
{
if(this.currentPageNumber == 1)
{
return 'selected';
}
else
{
return '';
}
}
//to display more pageNumbers
get displaymore()
{
if(this.currentPageNumber === this.item)
{
return 'selected';
}
else
{
return '';
}
}
//to display totalPage
get displayTotalPage()
{
if(this.currentPageNumber == this.totalPage)
{
return 'selected';
}
else
{
return '';
}
}
buildData()
{
console.log('Build data');
var data = [];
var pageNumber = this.currentPageNumber;
var pageSize = this.pageSize;
var totalAccounts = this.totalAccounts;
var x = (pageNumber-1)*pageSize;
for(; x<=(pageNumber)*pageSize; x++)
{
if(totalAccounts[x])
{
data.push(totalAccounts[x]);
}
}
this.showAccounts = data;
this.generatePageList(pageNumber);
}
generatePageList(pageNumber)
{
pageNumber= parseInt(pageNumber);
console.log('Page Number',pageNumber);
//this.pageList = [];
if(this.totalPage > 1)
{
if(this.totalPage <= 10)
{
var counter = 2;
for(; counter < (this.totalPage); counter++)
{
this.pageList.push(counter);
}
}
else
{
if(pageNumber < 5)
{
this.pageList.push(2,3,4,5,6);
}
else
{
if(pageNumber>(this.totalPage-5)){
this.pageList.push(this.totalPage-5, this.totalPage-4,
this.totalPage-3, this.totalPage-2, this.totalPage-1);
} else{
this.pageList.push(pageNumber-2, pageNumber-1, pageNumber,
pageNumber+1, pageNumber+2);
}
}
}
}
}
}
css
.THIS .selected{
color:orange;
}
I am building a Framework7 MVC app and found myself in a dead end alley. I have a form which I need to evaluate. This form contains selects. I am using localStorage to store the form values and everything works OK in that sense, I mean everything is stored correctly. ¿What is the issue? When I fill the form I answer some questions on textareas inputs, select inputs and inputs. everything goes fine until I try to reedit the form, then everything is display correctly on the form, including the score i got from my previous answers, but, the selects appears as if I have never touch them. Their previously selected value is stored but not display on the form. I have found that the issue is caused by the fact that I have set numerical values to the options values but what the form show is "yes" or "no". If I change the option values to "yes" or "no" then the form displays correctly but I need to set "5" or "0" because I need to evaluate the user's answers.
This is my code
The form
<li style="margin-top:-10px;">
<input style="visibility:hidden;height:1px;" value="0" name="choice" onchange="checkTotal()"/>
<input style="visibility:hidden;height:1px;" value="1" type="checkbox" name="choice" onchange="checkTotal()" checked="on">
</li>
<li><div class="item-content">1. ¿Sueles quejarte de sentirte mal?</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<select name="pr1" id="pr1" onchange="checkTotal()">
<option class="item-inner" value="5">No</option>
<option class="item-inner" value="0">Si</option>
</select>
</div>
</div>
</div>
<div class="item-content">En tal caso,</div>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<textarea class="resizable" id="pr1notes" placeholder="¿cuál es la causa?">{{model.pr1notes}}</textarea>
</div>
</div>
</div>
</li>
The functions on the editController
function init(query){
var protections = JSON.parse(localStorage.getItem("f7Protections"));
if (query && query.id) {
protection = new Protection(_.find(protections, { id: query.id }));
state.isNew = false;
}
else {
protection = new Protection({ isFavorite: query.isFavorite });
state.isNew = true;
}
View.render({ model: protection, bindings: bindings, state: state, doneCallback: saveProtection });
showSelectedValues();
}
function showSelectedValues(){
var fieldNames = protection.getSelectFields();
for (var i = 0, len = fieldNames.length; i < len; i++) {
var itemname = fieldNames[i];
var selectObj = document.getElementById(itemname);
if (selectObj!=null) {
var objOptions = selectObj.options;
var selIndex=0;
for (var j = 0, len2 = objOptions.length; j < len2; j++) {
if ((objOptions[j].label).localeCompare(protection[itemname])==0){
selIndex=j;
}
}
selectObj.options[selIndex].setAttribute("selected","selected");
}else{
}
}
}
and the model
Protection.prototype.setValues = function(inputValues, extras) {
for (var i = 0, len = inputValues.length; i < len; i++) {
var item = inputValues[i];
if (item.type === 'checkbox') {
this[item.id] = item.checked;
}
else {
this[item.id] = item.value;
}
}
for (var i = 0, len = extras[0].length; i < len; i++) {
var item = extras[0][i];
if((item.id).localeCompare("pr1notes")==0) {this[item.id] = item.value;}
}
console.log('starting loop for extras 3...');
for (var i = 0, len = extras[2].length; i < len; i++) {
var item = extras[2][i];
this[item.name] = item.value;
}
};
Protection.prototype.validate = function() {
var result = true;
if (_.isEmpty(this.prdate)
) {result = false;}
return result;
};
Protection.prototype.getSelectFields = function() {
return ['pr1'];
}
What should I change in order to keep my "5" or "0" values on the select options while the form options still show "yes" or "no" to the user just like this: <select name="pr1" id="pr1" onchange="checkTotal()"><option class="item-inner" value="5">No</option><option class="item-inner" value="0">Si</option></select>?
need anything else to help you understand the issue?
The simplest solution
function init(query){
var protections = JSON.parse(localStorage.getItem("f7Protections"));
if (query && query.id) {
protection = new Protection(_.find(protections, { id: query.id }));
state.isNew = false;
}
else {
protection = new Protection({ isFavorite: query.isFavorite });
state.isNew = true;
}
View.render({ model: protection, bindings: bindings, state: state, doneCallback: saveProtection });
showSelectedValues();
}
function showSelectedValues(){
var fieldNames = protection.getSelectFields();
for (var i = 0, len = fieldNames.length; i < len; i++) {
var itemname = fieldNames[i];
var selectObj = document.getElementById(itemname);
if (selectObj!=null) {
var objOptions = selectObj.options;
var selIndex=0;
for (var j = 0, len2 = objOptions.length; j < len2; j++) {
if ((objOptions[j].value).localeCompare(protection[itemname])==0){
selIndex=j;
}
}
selectObj.options[selIndex].setAttribute("selected","selected");
}else{
}
}
}
Just changed this line
if ((objOptions[j].label).localeCompare(protection[itemname])==0){
selIndex=j;
and changed .label for .value.
Using ag-grid-enterprise v5.4.0
create multiple textFilter input ex: [CONTAINS] filterText AND [NOT CONTAIN] filterText2 just like Excel data analysis
but both filterType2 and filterText are undefined after click [APPLY FILTER]
https://embed.plnkr.co/4nAjGKmChqJiRcqz6E2n/
I believe what you are trying to do would be best achieved with the Filter Component. This allows you full control of the filter pain, whether you are in enterprise or not. Here are the required methods for each custom filter:
function CustomFilter() {}
CustomFilter.prototype.init = function (params) {
//Put any initial functions you need here (such as setting values to null)
};
CustomFilter.prototype.getGui = function () {
//return a string of HTML or a DOM element/node
};
CustomFilter.prototype.doesFilterPass = function (params) {
//Logic for your custom Filter
//return True if the row should display, false otherwise
};
CustomFilter.prototype.isFilterActive = function () {
//logic for displaying the filter icon in the header
};
CustomFilter.prototype.getModel = function() {
//store the filter state
};
CustomFilter.prototype.setModel = function(model) {
//restore the filter state here
};
Here is an example of how to implement an "Includes x but Excludes y" filter:
function DoubleFilter() {
}
DoubleFilter.prototype.init = function (params) {
this.valueGetter = params.valueGetter;
this.filterText = null;
this.setupGui(params);
};
// not called by ag-Grid, just for us to help setup
DoubleFilter.prototype.setupGui = function (params) {
this.gui = document.createElement('div');
this.gui.innerHTML =
'<div style="padding: 4px; width: 200px;">' +
'<div style="font-weight: bold;">Custom Athlete Filter</div>' +
'Include: <div><input style="margin: 4px 0px 4px 0px;" type="text" id="includesText" placeholder="Includes..."/></div>' +
'Exclude: <div><input style="margin: 4px 0px 4px 0px;" type="text" id="excludesText" placeholder="Excludes..."/></div>' +
'</div>';
// add listeners to both text fields
this.eIncludesText = this.gui.querySelector('#includesText');
this.eIncludesText.addEventListener("changed", listener);
this.eIncludesText.addEventListener("paste", listener);
this.eIncludesText.addEventListener("input", listener);
// IE doesn't fire changed for special keys (eg delete, backspace), so need to
// listen for this further ones
this.eIncludesText.addEventListener("keydown", listener);
this.eIncludesText.addEventListener("keyup", listener);
this.eExcludesText = this.gui.querySelector('#excludesText');
this.eExcludesText.addEventListener("changed", listener2);
this.eExcludesText.addEventListener("paste", listener2);
this.eExcludesText.addEventListener("input", listener2);
// IE doesn't fire changed for special keys (eg delete, backspace), so need to
// listen for this further ones
this.eExcludesText.addEventListener("keydown", listener2);
this.eExcludesText.addEventListener("keyup", listener2);
var that = this;
function listener(event) {
that.includesText = event.target.value;
params.filterChangedCallback();
}
function listener2(event) {
that.excludesText = event.target.value;
params.filterChangedCallback();
}
};
DoubleFilter.prototype.getGui = function () {
return this.gui;
};
DoubleFilter.prototype.doesFilterPass = function (params) {
var passed = true;
var valueGetter = this.valueGetter;
var include = this.includesText;
var exclude = this.excludesText;
var value = valueGetter(params).toString().toLowerCase();
return value.indexOf(include) >= 0 && (value.indexOf(exclude) < 0 || exclude == '') ;
};
DoubleFilter.prototype.isFilterActive = function () {
return (this.includesText !== null && this.includesText !== undefined && this.includesText !== '')
|| (this.excludesText !== null && this.excludesText !== undefined && this.excludesText !== '');
};
DoubleFilter.prototype.getModel = function() {
var model = {
includes: this.includesText.value,
excludes: this.excludesText.value
};
return model;
};
DoubleFilter.prototype.setModel = function(model) {
this.eIncludesText.value = model.includes;
this.eExcludesText.value = model.excludes;
};
Here is a modified plunker. I placed the filter just on the Athlete column, but the DoubleFilter can be applied to any column once it is created.
EDIT:
I realized you were asking for a rather generic double filter in your question with "Includes and Excludes" as an example. Here is a plunker that has a more generic double filter.
ag-Grid now supports this behavior, by default, in version 18.0.0.
https://www.ag-grid.com/ag-grid-changelog/?fixVersion=18.0.0
I am using a custom menu extension from Magento. I have one issue. There is a popup dropdown box that appears on the menu. When I use firebug to trace the coding I find this:
<div id="popup6" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup6', 'menu6')" onmouseout="wpHideMenuPopup(this, event, 'popup6', 'menu6')" style="display: none; top: 20px; left: 20px; z-index: 10000;">
I cannot find this code any where in the files from the extension so I tracked down this:
<script type="text/javascript">
//<![CDATA[
var CUSTOMMENU_POPUP_WIDTH = <?php echo Mage::getStoreConfig('custom_menu/popup/width') + 0; ?>;
var CUSTOMMENU_POPUP_TOP_OFFSET = <?php echo Mage::getStoreConfig('custom_menu/popup/top_offset') + 0; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING = <?php echo Mage::getStoreConfig('custom_menu/popup/delay_displaying') + 0; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING = <?php echo Mage::getStoreConfig('custom_menu/popup/delay_hiding') + 0; ?>;
var CUSTOMMENU_RTL_MODE = <?php echo $_rtl; ?>;
var wpCustommenuTimerShow = {};
var wpCustommenuTimerHide = {};
//]]>
I need to change the top:20px where should I look for this? Its not in the js file and not in the css file... Cannot find it anywhere. Any ideas? I am a beginer! From my understanding it would have to be the JS file, I am not sure how to read it. JS is here:
function wpShowMenuPopup(objMenu, popupId)
{
if (typeof wpCustommenuTimerHide[popupId] != 'undefined') clearTimeout(wpCustommenuTimerHide[popupId]);
objMenu = $(objMenu.id); var popup = $(popupId); if (!popup) return;
wpCustommenuTimerShow[popupId] = setTimeout(function() {
popup.style.display = 'block';
objMenu.addClassName('active');
var popupWidth = CUSTOMMENU_POPUP_WIDTH;
if (!popupWidth) popupWidth = popup.getWidth();
var pos = wpPopupPos(objMenu, popupWidth);
popup.style.top = pos.top + 'px';
popup.style.left = pos.left + 'px';
wpSetPopupZIndex(popup);
if (CUSTOMMENU_POPUP_WIDTH)
popup.style.width = CUSTOMMENU_POPUP_WIDTH + 'px';
// --- Static Block width ---
var block2 = $(popupId).select('div.block2');
if (typeof block2[0] != 'undefined') {
var wStart = block2[0].id.indexOf('_w');
if (wStart > -1) {
var w = block2[0].id.substr(wStart+2);
} else {
var w = 0;
$(popupId).select('div.block1 div.column').each(function(item) {
w += $(item).getWidth();
});
}
//console.log(w);
if (w) block2[0].style.width = w + 'px';
}
}, CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING);
}
function wpHideMenuPopup(element, event, popupId, menuId)
{
if (typeof wpCustommenuTimerShow[popupId] != 'undefined') clearTimeout(wpCustommenuTimerShow[popupId]);
element = $(element.id); var popup = $(popupId); if (!popup) return;
var current_mouse_target = null;
if (event.toElement) {
current_mouse_target = event.toElement;
} else if (event.relatedTarget) {
current_mouse_target = event.relatedTarget;
}
wpCustommenuTimerHide[popupId] = setTimeout(function() {
if (!wpIsChildOf(element, current_mouse_target) && element != current_mouse_target) {
if (!wpIsChildOf(popup, current_mouse_target) && popup != current_mouse_target) {
popup.style.display = 'none';
$(menuId).removeClassName('active');
}
}
}, CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING);
}
function wpPopupOver(element, event, popupId, menuId)
{
if (typeof wpCustommenuTimerHide[popupId] != 'undefined') clearTimeout(wpCustommenuTimerHide[popupId]);
}
function wpPopupPos(objMenu, w)
{
var pos = objMenu.cumulativeOffset();
var wraper = $('custommenu');
var posWraper = wraper.cumulativeOffset();
var xTop = pos.top - posWraper.top
if (CUSTOMMENU_POPUP_TOP_OFFSET) {
xTop += CUSTOMMENU_POPUP_TOP_OFFSET;
} else {
xTop += objMenu.getHeight();
}
var res = {'top': xTop};
if (CUSTOMMENU_RTL_MODE) {
var xLeft = pos.left - posWraper.left - w + objMenu.getWidth();
if (xLeft < 0) xLeft = 0;
res.left = xLeft;
} else {
var wWraper = wraper.getWidth();
var xLeft = pos.left - posWraper.left;
if ((xLeft + w) > wWraper) xLeft = wWraper - w;
if (xLeft < 0) xLeft = 0;
res.left = xLeft;
}
return res;
}
function wpIsChildOf(parent, child)
{
if (child != null) {
while (child.parentNode) {
if ((child = child.parentNode) == parent) {
return true;
}
}
}
return false;
}
function wpSetPopupZIndex(popup)
{
$$('.wp-custom-menu-popup').each(function(item){
item.style.zIndex = '9999';
});
popup.style.zIndex = '10000';
}
enter code here
There is an option in custom menu settings - top offset, may be this option defines top: 20px; attribute.
I am trying to implement Autocomplete in a text area (similar to http://www.pengoworks.com/workshop/jquery/autocomplete.htm).
What I am trying to do is when a user enters a specific set of characters (say insert:) they will get an AJAX filled div with possible selectable matches.
In a regular text box, this is of course simple, but in a text area I need to be able to popup the div in the correct location on the screen based on the cursor.
Can anyone provide any direction?
Thanks,
-M
You can get the caret using document.selection.createRange(), and then examining it to reveal all the information you need (such as position). See those examples for more details.
Implementing an autocomplete in a text area is not that easy. I implemented a jquery plugin that does that, and i had to create a clone of the texarea to guess where the cursor is positioned inside the textarea.
Its working, but its not perfect.
You can check it out here: http://www.amirharel.com/2011/03/07/implementing-autocomplete-jquery-plugin-for-textarea/
I hope it helps.
function getCursor(nBox){
var cursorPos = 0;
if (document.selection){
nBox.focus();
var tmpRange = document.selection.createRange();
tmpRange.moveStart('character',-nBox.value.length);
cursorPos = tmpRange.text.length;
}
else{
if (nBox.selectionStart || nBox.selectionStart == '0'){
cursorPos = nBox.selectionStart;
}
}
return cursorPos;
}
function detectLine(nBox,lines){
var cursorPos = getCursor(nBox);
var z = 0; //Sum of characters in lines
var lineNumber = 1;
for (var i=1; i<=lines.length; i++){
z = sumLines(i)+i; // +i because cursorPos is taking in account endcharacters of each line.
if (z >= cursorPos){
lineNumber = i;
break;
}
}
return lineNumber;
function sumLines(arrayLevel){
sumLine = 0;
for (var k=0; k<arrayLevel; k++){
sumLine += lines[k].length;
}
return sumLine;
}
}
function detectWord(lineString, area, currentLine, linijeKoda){
function sumWords(arrayLevel){
var sumLine = 0;
for (var k=0; k<arrayLevel; k++){
sumLine += words[k].length;
}
return sumLine;
}
var cursorPos = getCursor(area);
var sumOfPrevChars =0;
for (var i=1; i<currentLine; i++){
sumOfPrevChars += linijeKoda[i].length;
}
var cursorLinePos = cursorPos - sumOfPrevChars;
var words = lineString.split(" ");
var word;
var y = 0;
for(var i=1; i<=words.length; i++){
y = sumWords(i) + i;
if(y >= cursorLinePos){
word = i;
break;
}
}
return word;
}
var area = document.getElementById("area");
var linijeKoda = area.value.split("\n");
var currentLine = detectLine(area,linijeKoda);
var lineString = linijeKoda[currentLine-1];
var activeWord = detectWord(lineString, area, currentLine, linijeKoda);
var words = lineString.split(" ");
if(words.length > 1){
var possibleString = words[activeWord-1];
}
else{
var possibleString = words[0];
}
That would do it ... :)
an ugly solution:
for ie: use document.selection...
for ff: use a pre behind textarea, paste text before cursor into it, put a marker html element after it (cursorPos), and get the cursor position via that marker element
Notes: | code is ugly, sorry for that | pre and textarea font must be the same | opacity is utilized for visualization | there is no autocomplete, just a cursor following div here (as you type inside textarea) (modify it based on your need)
<html>
<style>
pre.studentCodeColor{
position:absolute;
margin:0;
padding:0;
border:1px solid blue;
z-index:2;
}
textarea.studentCode{
position:relative;
margin:0;
padding:0;
border:1px solid silver;
z-index:3;
overflow:visible;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>
hello world<br/>
how are you<br/>
<pre class="studentCodeColor" id="preBehindMyTextarea">
</pre>
<textarea id="myTextarea" class="studentCode" cols="100" rows="30" onkeyup="document.selection?ieTaKeyUp():taKeyUp();">
</textarea>
<div
style="width:100px;height:60px;position:absolute;border:1px solid red;background-color:yellow"
id="autoCompleteSelector">
autocomplete contents
</div>
<script>
var myTextarea = document.getElementById('myTextarea');
var preBehindMyTextarea = document.getElementById('preBehindMyTextarea');
var autoCompleteSelector = document.getElementById('autoCompleteSelector');
function ieTaKeyUp(){
var r = document.selection.createRange();
autoCompleteSelector.style.top = r.offsetTop;
autoCompleteSelector.style.left = r.offsetLeft;
}
function taKeyUp(){
taSelectionStart = myTextarea.selectionStart;
preBehindMyTextarea.innerHTML = myTextarea.value.substr(0,taSelectionStart)+'<span id="cursorPos">';
cp = document.getElementById('cursorPos');
leftTop = findPos(cp);
autoCompleteSelector.style.top = leftTop[1];
autoCompleteSelector.style.left = leftTop[0];
}
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
//myTextarea.selectionStart
</script>
</html>