I am trying to create an autocomplete textbox for a list of items on an array.
I have put those array values in a listcontrol box and I am reloading the listcontrol everytime a key is enter into the input textbox called "functioninput". My problem is that when the up event is fired I dont seem to get the last key enter unless it loses focus with another element (i.e.alert or as in this example a js focus command to another element). Afterwards, I return the focus back to the "functioninput" element so that the user can enter more keys. Unfortunately this returns the cursor back to the first position and not to the end of the text. I have done some googling and tried reassigning the input textbox after setting the focus back to the input box but with no success.
I cant seem to come up with an answer for this and I am looking to see if anyone can help.
If I can either get the textbox value immediately after a key is pressed or if I can resolve the positioning of the cursor after regaining focus then my problems would be solved.
Below is the code that I inserted in my command directory for testing purposes
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">
<html>
<head>
<script>
var functionlist = Array("abs",
"acos","acosh","addcslashes","addslashes","aggregate","stream_context_ create");
var list_com;
function handleKeyUp(maxNumToShow){
if (!maxNumToShow) maxNumToShow = 9999;
var textObj = document.forms[0].functioninput;
document.forms[0].button.focus(); //comment this out and does not register latest key enter
loadlist(textObj.value,maxNumToShow);
document.forms[0].functioninput.focus();
}
function loadlist(textValue,maxNumToShow) {
var newlist = Array();
if (!maxNumToShow) maxNumToShow = 9999;
// Set the search pattern depending
if (!textValue) searchPattern = null;
else{
if(document.forms[0].functionradio[0].checked == true)
searchPattern = "^"+textValue;
else searchPattern = textValue;
re = new RegExp(searchPattern,"gi");
}
numShown = 0;
for(i = 0; i < functionListLength; i++)
{
if(searchPattern == null){
newlist[numShown] = functionlist[i];
numShown++;
}
else if (functionlist[i].search(re) != -1){
newlist[numShown] = functionlist[i];
numShown++;
}
}
list_com.setAll(newlist);
}
function doOnLoad(){
list_com = new ListControl("functionselect");
selectObj = document.forms[0].functionselect;
functionListLength = functionlist.length;
loadlist();
}
</script>
<title>Test Page</title>
</head>
<body onLoad="doOnLoad();">
<table style="margin:auto;">
<tr>
<td valign="top">
<b>Search For Function Name</b>
<form onSubmit="handleSelectClick();return false;" action="#">
<input name="functionradio" type="radio" checked>Starting With<br>
<input name="functionradio" type="radio" >Containing<br>
<input name="functioninput" type="text" id="functioninput" onKeyUp="handleKeyUp();" VALUE="">
<br /><br />
<select name="functionselect" id="functionselect" size="20" multiple='multiple'
editable="true" style="width:34ex; ; height: 200px" >
</select>
<br />
<input type="button" id="button" value="Load All Matches">
</form>
</td>
</tr>
</table>
</body>
</html>
