Entry
JavaScript: How to autocomplete a text field?
JavaScript: How to connect a text field and a select element?
JavaScript: How to connect a text field and a select element?
Jan 27th, 2003 06:29
Martin Honnen, Knud van Eeden,
IE5 has a html attribute
<INPUT AUTOCOMPLETE="on" ...>
which asks IE to remember values entered and present in a listbox the
next time the user visits.
Besides that and with IE4 you can script some autocompletion using the
range object which allows you to highlight/select the autocompleted
suffix in the text box:
<SCRIPT>
function matchFieldSelect (field, select, value) {
var property = value ? 'value' : 'text';
var found = false;
for (var i = 0; i < select.options.length; i++)
if ((found = select.options[i][property].indexOf(field.value) ==
0))
break;
if (found)
select.selectedIndex = i;
else
select.selectedIndex = -1;
if (field.createTextRange) {
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"
if (cursorKeys.indexOf(event.keyCode+";") == -1) {
var r1 = field.createTextRange()
var oldValue = r1.text;
var newValue = found ? select.options[i][property] : oldValue;
if (newValue != field.value) {
field.value = newValue
var rNew = field.createTextRange()
rNew.moveStart('character', oldValue.length)
rNew.select()
}
}
}
}
</SCRIPT>
<FORM NAME="aForm">
<INPUT TYPE="text" NAME="word"
ONKEYUP="matchFieldSelect(this, this.form.words)"
>
<BR>
<SELECT NAME="words" SIZE="4"
ONCHANGE="this.form.word.value = this.options
[this.selectedIndex].text"
>
<OPTION>Kibo
<OPTION>Kibologist
<OPTION>Kibology
<OPTION>Kibology for all
</SELECT>
</FORM>
As Mozilla/Netscape 7 also allow manipulation of the selection in an
<input type="text" /> element here a solution for Mozilla/Netscape 7
(probably works with Netscape 6 too but I haven't checked):
<html>
<head>
<title>input autocompletion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var riders = [
"Armstrong",
"Indurain",
"Lemond",
"Pantani",
"Riis",
"Ullrich"
];
function autoComplete (dataArray, input, evt) {
if (input.value.length == 0) {
return;
}
var match = false;
for (var i = 0; i < dataArray.length; i++) {
if ((match = dataArray[i].toLowerCase().indexOf
(input.value.toLowerCase()) == 0)) {
break;
}
}
if (match) {
var typedText = input.value;
if (typeof input.selectionStart != 'undefined') {
if (evt.keyCode == 16) {
return;
}
input.value = dataArray[i];
input.setSelectionRange(typedText.length, input.value.length);
}
else if (input.createTextRange) {
if (evt.keyCode == 16) {
return;
}
input.value = dataArray[i];
var range = input.createTextRange();
range.moveStart('character', typedText.length);
range.moveEnd('character', input.value.length);
range.select();
}
else {
if (confirm("Are you looking for '" + dataArray[i] + "'?")) {
input.value = dataArray[i];
}
}
}
}
</script>
</head>
<body>
<form name="gui">
<label>
Enter Tour de France Winner:
<input type="text" name="tdfWinner"
onkeyup="autoComplete(riders, this, event);"
autocompletion="off">
</label>
</form>
</body>
</html>
-----------------------------------------------------------------------
--- Knud van Eeden - 27 September 2001 - 00:37 ------------------------
[Internet: see also:
http://www.faqts.com/knowledge_base/view.phtml/aid/8702/fid/129]
-----------------------------------------------------------------------
