select drop-down position on input

[dexeloper]

When you directly create a 'select' list in your html, the user positions their cursor there and enters a letter the list get positioned at that letter. There are examples on this site.
However, when I create such a list using Ajax and innerHTML the positioning doesn't seem to happen.
Any ideas?

 

[feherke]

Hi

create such a list using Ajax and innerHTML

When dynamically create/populate a [tt]select[/tt] element, instantiate the [tt]option[/tt] elements instead of assigning them as string to the [tt]innerHTML[/tt] property. For example with a function like this :

[b]function[/b] [COLOR=darkgoldenrod]mkselect[/color][teal]([/teal]where[teal],[/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal][b]typeof[/b] what[teal]==[/teal][green][i]'string'[/i][/green][teal])[/teal] [b]try[/b] [teal]{[/teal] [COLOR=darkgoldenrod]eval[/color][teal]([/teal][green][i]'what='[/i][/green][teal]+[/teal]what[teal])[/teal] [teal]}[/teal] [b]catch[/b] [teal]([/teal]e[teal])[/teal] [teal]{[/teal] [b]return[/b] [teal]}[/teal]
  [b]if[/b] [teal]([/teal][b]typeof[/b] where[teal]==[/teal][green][i]'string'[/i][/green][teal])[/teal] where[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]where[teal])[/teal]
  [b]if[/b] [teal](![/teal]where[teal])[/teal] [b]return[/b]
  [b]if[/b] [teal]([/teal]where[teal].[/teal]nodeName[teal].[/teal][COLOR=darkgoldenrod]toLowerCase[/color][teal]()!=[/teal][green][i]'select'[/i][/green][teal])[/teal] where[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]where[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'select'[/i][/green][teal]))[/teal]
  [b]while[/b] [teal]([/teal]where[teal].[/teal]options[teal].[/teal]length[teal])[/teal] where[teal].[/teal]options[teal][[/teal]where[teal].[/teal]options[teal].[/teal]length[teal]-[/teal][purple]1[/purple][teal]]=[/teal][b]null[/b]
  [b]if[/b] [teal]([/teal]what[teal].[/teal]name[teal])[/teal] where[teal].[/teal]name[teal]=[/teal]what[teal].[/teal]name
  [b]if[/b] [teal]([/teal]what[teal].[/teal]option[teal])[/teal] what[teal]=[/teal]what[teal].[/teal]option
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] where[teal].[/teal]options[teal][[/teal]where[teal].[/teal]options[teal].[/teal]length[teal]]=[/teal][b]typeof[/b] what[teal][[/teal]i[teal]]==[/teal][green][i]'object'[/i][/green][teal]?[/teal][b]new[/b] [COLOR=darkgoldenrod]Option[/color][teal]([/teal]what[teal][[/teal]i[teal]].[/teal]text[teal],[/teal]what[teal][[/teal]i[teal]].[/teal]value[teal]):[/teal][b]new[/b] [COLOR=darkgoldenrod]Option[/color][teal]([/teal]what[teal][[/teal]i[teal]])[/teal]
[teal]}[/teal]

Supposing you have a [tt]form[/tt] like this :

[b]<form[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"fo"[/i][/green][b]>[/b]
[b]<select[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"se"[/i][/green][b]>[/b]
[b]<option[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"no"[/i][/green][b]>[/b]nothing[b]</option>[/b]
[b]</select>[/b]
[b]</form>[/b]

You can call the function in one of ( or a combination of ) this ways :

[gray]// populate the existing select with id se, its current content will be removed[/gray]
[gray]// specify a JSON-like string containing the options' data ( may come directly from the responseText of an XMLHttpRequest )[/gray]
[gray]// in the options' data just enumerate the new values[/gray]
[COLOR=darkgoldenrod]mkselect[/color][teal]([/teal][green][i]'se'[/i][/green][teal],[/teal][green][i]'["Tek","Tips","Rulez"]'[/i][/green][teal])[/teal]

[gray]// create a new select and make it child of the element passed by reference[/gray]
[gray]// pass the options' data as an object[/gray]
[gray]// set the name of the select to the specified one[/gray]
[gray]// in the options' data enumerate objects containing the new texts and values[/gray]
[COLOR=darkgoldenrod]mkselect[/color][teal]([/teal]document[teal].[/teal]forms[teal][[/teal][purple]0[/purple][teal]],[/teal][teal]{[/teal][green][i]'name'[/i][/green][teal]:[/teal][green][i]'whatever'[/i][/green][teal],[/teal][green][i]'option'[/i][/green][teal]:[[/teal][teal]{[/teal][green][i]'text'[/i][/green][teal]:[/teal][green][i]'one'[/i][/green][teal],[/teal][green][i]'value'[/i][/green][teal]:[/teal][green][i]'first'[/i][/green][teal]}[/teal][teal],[/teal][teal]{[/teal][green][i]'text'[/i][/green][teal]:[/teal][green][i]'two'[/i][/green][teal],[/teal][green][i]'value'[/i][/green][teal]:[/teal][green][i]'second'[/i][/green][teal]}[/teal][teal]][/teal][teal]}[/teal][teal])[/teal]

This is just a general advice. I do not claim that the above will change anything. Especially because I not fully understand the situation.

Feherke.

http://free.rootshell.be/~feherke/