Sign in to follow this  
Tradone

[web] Cross Between Select and Input Form

Recommended Posts

For example, let's say I have the following
<select name="linkTarget">
<option value="_self">_self</option>
<option value="_self">_parent</option>
<option value="_self">_top</option>
</select>


and I want the user to also be able to type in his desired target frame, directly into the select box. Now is this possible? Like just type directly in there. like the address window of the internet explorer, the first couple of websites I've been visiting are listed when I click the arrow on the right, but I can erase all that and write my own information. b/c I don't think this is possible, but just an idea.

Share this post


Link to post
Share on other sites
It's not possible to do unless you make your own DHTML control. For a person experienced in JS and the DOM, it's an easy thing to do. Just have a normal <input type="text" /> control with an onclick that opens up a <select (multiple) /> control absolutely positioned directly underneath it.

Share this post


Link to post
Share on other sites
Quote:
Original post by konForce
It's not possible to do unless you make your own DHTML control. For a person experienced in JS and the DOM, it's an easy thing to do.

any kind of links will be appreciated..


Quote:
Original post by konForce
Just have a normal <input type="text" /> control with an onclick that opens up a <select (multiple) /> control absolutely positioned directly underneath it.

That's what I'm doing right now, but it's rather cumbersome.
I have a select box and if you select other, an input text appears right next to it. but, again it's cumbersome.

Share this post


Link to post
Share on other sites
Thanks Dave, looking at the examples from DHTML DOM, it seems like I've been able to do those without knowing that they were DHTML DOM. BTW that was a spectacular link, extremely content rich, useful javascripts.

but i don't think I can accomplish what I'm trying to do... can I?
it's like creating a whole new input type.
exactly the same thing as just like internet explorer's address location bar.
you can select from the right, or input your own text in the same input form.

It seems like the previous answers are implying that it is possible using DOM and DHTML. but from the information that I've gathered from the W3C and such, I don't think it's possible.

Share this post


Link to post
Share on other sites
What you are trying to create is known as a "combo box". In order for it to work, you need to pre-load all of the possible search results into an array and have an onChange event called on the INPUT field, which will create/update a DIV tag which is positioned directly below the INPUT field.

Here is a good example, with code.

Good luck to you!

Share this post


Link to post
Share on other sites
Quote:
Original post by Tesseract
What you are trying to create is known as a "combo box". In order for it to work, you need to pre-load all of the possible search results into an array and have an onChange event called on the INPUT field, which will create/update a DIV tag which is positioned directly below the INPUT field.

Here is a good example, with code.

Good luck to you!


Ajax removes the need to preload all of the data.

Share this post


Link to post
Share on other sites
hm... I see.
I can't do much about making a new input type, but I can somewhat fabricate something like it.

okay, i get the gist of it now. Thanks

Share this post


Link to post
Share on other sites
Quote:
Original post by tstrimp
Quote:
Original post by Tesseract
What you are trying to create is known as a "combo box". In order for it to work, you need to pre-load all of the possible search results into an array and have an onChange event called on the INPUT field, which will create/update a DIV tag which is positioned directly below the INPUT field.

Here is a good example, with code.

Good luck to you!


Ajax removes the need to preload all of the data.


True, but if Tradone doesn't have access to middleware, or is not experienced enough with the various technologies to set it up, then a js array would be the next best thing.

Share this post


Link to post
Share on other sites
Jesus Christ did you guys check this link out?
God damn.....
Open in new window
Really, this link just made me think that there is actually a lot more that can be done on the web than just searching on google.
and yes, they are called comboboxes, thanks for the information guys. I rated everybody up that was involved.
edit: They are just incredible.
Their work is unbelievable. It has the same capabilities if not more than the windows environment. It is just amazing, astounding. Unbelievable.

Come to think about it, I knew had all the knowedge required to make a combobox. It is just a div layer that floats under the input when there are certain matching characters in the input box. Very interesting.

[Edited by - Tradone on April 17, 2006 5:26:52 PM]

Share this post


Link to post
Share on other sites
I searched javascript combobox on "yahoo"
and got this on the 1st or 2nd match or so:
http://krolik.net/ComboBox.shtml
Exactly what I wanted.
Thanks guys :D

edit: what the hell? It doesn't work on opera.
if you can, can you tell me why this doesn't work on opera?

function BuildDCBox(BaseName, StartValue, Options, PixelWidth, Other, AdditionalStyle)
{
var DCOptions
if (!(PixelWidth)) PixelWidth = 200;
if (!(StartValue)) StartValue = "";
if ((typeof Options) == "string") { DCOptions = Options.split(",") } else { DCOptions = Options }
var strBuild = "";
if (document.layers)
strBuild += "<table border=0><tr><td align=center>";
strBuild += "<input type='text' value='" + StartValue;
strBuild += "' name='" + BaseName + "' id='" + BaseName + "' "
if (!(document.layers))
strBuild += "style='width: " + (PixelWidth - 19) + "px; position: relative; " + AdditionalStyle + "' ";
strBuild += Other + " />"
if (document.layers)
strBuild += "</td></tr><tr><td align=center>- Or Select -</td></tr><tr><td align=center>";
else
strBuild += "<img border='0' height='1' width='23' />";
strBuild += "<select name='" + BaseName + "DcboBox' id='" + BaseName ;
strBuild += "DcboBox' "
if (!(document.layers))
strBuild += "style='width: " + PixelWidth + "px; position: absolute; visibility: hidden; " + AdditionalStyle + "' ";
strBuild += "readonly='true' onchange='UpdateDCBoxGeneric(event);' >" ;
if ((DCOptions) && (DCOptions.length))
{
for (var cnt = 0; cnt < DCOptions.length; cnt++ )
{
strBuild += "<option>" + DCOptions[cnt] + "</option>";
}
}
strBuild += "</select>";
if (document.layers)
strBuild += "</td></tr></table>";
return (strBuild);

}



[Edited by - Tradone on April 18, 2006 6:37:26 PM]

Share this post


Link to post
Share on other sites
well, krolik's ComboBox fools the user by putting up a layer of input type=text just above a select form.

seems like opera doesn't support layers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this