Does anyone know how to autocomplete Combobox based on character type;
for example
if I type U then it will show UK in the selected and in the dropdown UK and USA.You want it to work like the old MS Access drop downs.
see if this is what you're looking for....if so....you can look at the source to see how it's down.
<!-- m --><a class="postlink" href="http://www.ageofdigital.com/new_add.aspThx">http://www.ageofdigital.com/new_add.aspThx</a><!-- m --> for reply.
This is good, kind of half good...
I need something like his;
Below is the link that does exactly I need, BUT it is in VB, not ASP or HTML;
Save the zip file from below link and extract and RUN from VB to see it;
Couldnot attach .exe file here.
<!-- m --><a class="postlink" href="http://www.freevbcode.com/ShowCode.Asp?ID=5944Yeah">http://www.freevbcode.com/ShowCode.Asp?ID=5944Yeah</a><!-- m -->, it's the old MS Access style combo-box.
The only things I've ever seen to do that on the web perfectly have been ActiveX plug-ins which you prolly don't want to use unless you're in some closed all M$ environment like an all-IE intranet.
What do you need past what mine does?I have found this code that does excellently in HTML; BUT has an array hardcoded for <INPUT> tag;
NOT for <SELECT> tag with option values rather than hard coded array..
<!-- m --><a class="postlink" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1174/fid/130Found">http://www.faqts.com/knowledge_base/vie ... d/130Found</a><!-- m --> the answer; as below code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<SCRIPT>
function matchFieldSelect (field, select, value) {
//alert("field= "+field);
//alert("select= "+select);
//alert("value= "+value);
var property = value ? 'value' : 'text';
var found = false;
//alert("property= " +property);
for (var i = 0; i < select.options.length; i++)
if ((found = select.options[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[property] : oldValue;
if (newValue != field.value) {
field.value = newValue
var rNew = field.createTextRange()
rNew.moveStart('character', oldValue.length)
rNew.select()
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm"><!--<DIV STYLE="Z-INDEX: 2; LEFT: 50px; MARGIN: 10px; WIDTH: 100px; POSITION: absolute; TOP: 50px; HEIGHT: 130px"><P STYLE="MARGIN-BOTTOM: -1%">-->
<INPUT NAME="word" style="WIDTH: 161px; HEIGHT: 22px" tabindex =1 ONKEYUP="matchFieldSelect(this, this.form.words)" size=17>
<INPUT id=button1 style="BACKGROUND-IMAGE:url(btnCombo.gif); WIDTH:23px;HEIGHT:24px"
onclick="javascript:
if (document.aForm.words.style.visibility == 'visible'){
document.aForm.words.style.visibility= 'hidden';
}
else {
document.aForm.words.style.visibility= 'visible';
matchFieldSelect(this.form.word, this.form.words);
}" type=button size=29 name=button1>
<!--</DIV> -->
<BR><!--<DIV STYLE="Z-INDEX: 4; LEFT: 50px; MARGIN: 10px; WIDTH: 100px; POSITION: absolute; TOP: 130px; HEIGHT: 70px">-->
<SELECT style="WIDTH: 175px" size="4" tabIndex=2 onchange="this.form.word.value = this.options
[this.selectedIndex].text" name=words>
<OPTION></OPTION>
<OPTION>Kibo</OPTION>
<OPTION>Kibologist</OPTION>
<OPTION>Kibology</OPTION>
<OPTION>Kibology for all</OPTION>
</SELECT><!--</DIV>-->
</FORM>
<SCRIPT LANGUAGE=vbscript>
Sub Window_OnLoad
document.aForm.words.style.visibility = "hidden"
End Sub
</SCRIPT>
</BODY>
</HTML>I've been there before and here's a couple of warnings with that code.
First - doesn't work too great in non-IE browsers - behaves very clunkily
Second - the way it is now with the <div>s commented out takes up physical space to make that list - if you have stuff below it, the hiding and showing will "bounce" stuff around something fierce.
Third - combo boxes usually allow you to press enter to make the current selection - this one will submit the form (not sure what'd it do with more than just the one field) - this is more preference but all the combo boxes I've typically used allow the Enter key.
If you shore up those few things, you should be okay.
One of thing.....because the options listing is in a <select> it is a part of the <form> That shouldn't really affect too many things but just something to watch.
Again, though, what does that do that mine did not? Just curious?
for example
if I type U then it will show UK in the selected and in the dropdown UK and USA.You want it to work like the old MS Access drop downs.
see if this is what you're looking for....if so....you can look at the source to see how it's down.
<!-- m --><a class="postlink" href="http://www.ageofdigital.com/new_add.aspThx">http://www.ageofdigital.com/new_add.aspThx</a><!-- m --> for reply.
This is good, kind of half good...
I need something like his;
Below is the link that does exactly I need, BUT it is in VB, not ASP or HTML;
Save the zip file from below link and extract and RUN from VB to see it;
Couldnot attach .exe file here.
<!-- m --><a class="postlink" href="http://www.freevbcode.com/ShowCode.Asp?ID=5944Yeah">http://www.freevbcode.com/ShowCode.Asp?ID=5944Yeah</a><!-- m -->, it's the old MS Access style combo-box.
The only things I've ever seen to do that on the web perfectly have been ActiveX plug-ins which you prolly don't want to use unless you're in some closed all M$ environment like an all-IE intranet.
What do you need past what mine does?I have found this code that does excellently in HTML; BUT has an array hardcoded for <INPUT> tag;
NOT for <SELECT> tag with option values rather than hard coded array..
<!-- m --><a class="postlink" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1174/fid/130Found">http://www.faqts.com/knowledge_base/vie ... d/130Found</a><!-- m --> the answer; as below code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=unicode">
<SCRIPT>
function matchFieldSelect (field, select, value) {
//alert("field= "+field);
//alert("select= "+select);
//alert("value= "+value);
var property = value ? 'value' : 'text';
var found = false;
//alert("property= " +property);
for (var i = 0; i < select.options.length; i++)
if ((found = select.options[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[property] : oldValue;
if (newValue != field.value) {
field.value = newValue
var rNew = field.createTextRange()
rNew.moveStart('character', oldValue.length)
rNew.select()
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm"><!--<DIV STYLE="Z-INDEX: 2; LEFT: 50px; MARGIN: 10px; WIDTH: 100px; POSITION: absolute; TOP: 50px; HEIGHT: 130px"><P STYLE="MARGIN-BOTTOM: -1%">-->
<INPUT NAME="word" style="WIDTH: 161px; HEIGHT: 22px" tabindex =1 ONKEYUP="matchFieldSelect(this, this.form.words)" size=17>
<INPUT id=button1 style="BACKGROUND-IMAGE:url(btnCombo.gif); WIDTH:23px;HEIGHT:24px"
onclick="javascript:
if (document.aForm.words.style.visibility == 'visible'){
document.aForm.words.style.visibility= 'hidden';
}
else {
document.aForm.words.style.visibility= 'visible';
matchFieldSelect(this.form.word, this.form.words);
}" type=button size=29 name=button1>
<!--</DIV> -->
<BR><!--<DIV STYLE="Z-INDEX: 4; LEFT: 50px; MARGIN: 10px; WIDTH: 100px; POSITION: absolute; TOP: 130px; HEIGHT: 70px">-->
<SELECT style="WIDTH: 175px" size="4" tabIndex=2 onchange="this.form.word.value = this.options
[this.selectedIndex].text" name=words>
<OPTION></OPTION>
<OPTION>Kibo</OPTION>
<OPTION>Kibologist</OPTION>
<OPTION>Kibology</OPTION>
<OPTION>Kibology for all</OPTION>
</SELECT><!--</DIV>-->
</FORM>
<SCRIPT LANGUAGE=vbscript>
Sub Window_OnLoad
document.aForm.words.style.visibility = "hidden"
End Sub
</SCRIPT>
</BODY>
</HTML>I've been there before and here's a couple of warnings with that code.
First - doesn't work too great in non-IE browsers - behaves very clunkily
Second - the way it is now with the <div>s commented out takes up physical space to make that list - if you have stuff below it, the hiding and showing will "bounce" stuff around something fierce.
Third - combo boxes usually allow you to press enter to make the current selection - this one will submit the form (not sure what'd it do with more than just the one field) - this is more preference but all the combo boxes I've typically used allow the Enter key.
If you shore up those few things, you should be okay.
One of thing.....because the options listing is in a <select> it is a part of the <form> That shouldn't really affect too many things but just something to watch.
Again, though, what does that do that mine did not? Just curious?