• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 818
  • Last Modified:

Typeable Dropdown (List) Javascript challenge!

Here's an interesting chllenge for a typeable dropdown!
I have attached a bit of code (- but that doesn't mean it cannot be better).

This might actually work better with a list box element, - because the drop down needs to be clicked each time (and also you don't need to worry about hiding the dropdown element under the text box, which is problematic).

I thought this in the following way:
  onfocus  on the text box - a list box would pop under a text box;
  on click (for the list box) would select the item into text box and hide list;

*** Important Note ***
The text box must work as a 'filter' for the list.
I think this can be done nicely if there is a hidden list (I would prefer it to array) which re-populates the visible list on the onkeyup event...

****************************
If you are writing from scratch you might find the following useful:

1) functions which returns the position of the elment

  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

el.style.left=findPosX(document.getElementById(linkedId1));
el.style.top=findPosY(document.getElementById(linkedId1))+22;


function addOption(myparent,val,txt){var o=document.createElement("OPTION");if(txt!=null){var t=document.createTextNode(txt);o.appendChild(t)}if((val!=null)&&(val.length>0))o.value=val;if(myparent!=null)myparent.appendChild(o);return o}

2) Code to refresh select box (from another box).

function removeAllChildren2(myparent,el){while(myparent.getElementById(el).childNodes[0]){myparent.getElementById(el).removeChild(myparent.getElementById(el).childNodes[0])}}

function RefreshSelectBox(el,el2,searchstring)
{
removeAllChildren2(document,el2);
searchstring = searchstring.toLowerCase();
var el_ = document.getElementById(el)
var el_2 = document.getElementById(el2)
var j=0;
//alert(el_.length);
while(j<=el_.length*2)
// for some reason every other element appears as undefined (- presumaby because of </option> tags) - so need to account for these empty elements
{
//alert(el_.childNodes[j].value);
if  ((el_.childNodes[j].text) && ((searchstring == '') || (el_.childNodes[j].text.toLowerCase().indexOf(searchstring)>-1)))
    addOption(el_2,el_.childNodes[j].value,el_.childNodes[j].text)
j++;
}
}
That's it - happy coding!!!!!!!

0
CallConnection
Asked:
CallConnection
  • 4
  • 4
1 Solution
 
numbers1to9Commented:
But, what's the problem?
0
 
CallConnectionAuthor Commented:
Basically I am looking for a better alternative to the standard dropdown box, which could be a typeable textbox, with a list you can pick to populate the textbox.... So you can enter your own text or pick from the list.
0
 
numbers1to9Commented:
To you mean a auto-complete function? (Albeit somewhat modified) Because that is what it sounds like...
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
CallConnectionAuthor Commented:
Yes, that would be something like it...
0
 
numbers1to9Commented:
What part do you need help with? Because I could bombard you with links to miscellaneous tutorials and examples -- if that makes your boat float.

Are you looking for some basic ideas?

Or, do you want to "modify" the code that you have posted?

First of, I couldn't see the use of a XhttpRequest in your code... And then there is the part of the server side code...

0
 
CallConnectionAuthor Commented:
Thank you for coming back numbers... Yes, I think I woud be very happy with a few good links to give me an idea of how this kind of this is achieveable - ideally in javascript, and that's all. cheers!
0
 
numbers1to9Commented:
You can make it work entirely in JavaScript if you want to. This is my favourite auto-complete function:

http://www.webreference.com/programming/javascript/ncz/column2/

It uses only JavaScript. I built my own auto-complete out of it, adding support for "AJAX" (XhttpRequest) so it would work with PHP. If that interest you you could start by visiting W3Schools to see how such features would work.

http://www.w3schools.com/ajax/default.asp

Here you will find many basic example of how "AJAX" works and some working examples of "AJAX driven" "auto-complete" functions.

http://www.w3schools.com/ajax/ajax_example_suggest.asp
http://www.w3schools.com/php/php_ajax_livesearch.asp

(Note that the example are available for both PHP and ASP).

Some other examples (first one uses AJAX, the rest is JavaScript only):
http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html (this one is really slick)
http://www.go4expert.com/forums/showthread.php?t=357 
http://gadgetopia.com/post/3773
http://www.sitepoint.com/article/life-autocomplete-textboxes

I didn't go with the above examples for various reason. Maybe you'll like one of them better. I hope this was what you were looking for.


OK, now for some basic ideas.

First you need to decide how you are going to save and retrieve the data.

If you want to fetch it from a database, or such, the best approach would be the "AJAX" way. Of the matter of fact, using only JavaScript is -- my opinion -- only useful if you are going to to get simple data that basically fits in a array (see the "JavaScript-only" examples above).

When that is done, you need to decide how the user is going to interact with the data.

A basic function should be: when the user focuses on the input box and presses a key: get the key, see if it should be used, and list all objects (data) that matches that key.

Then there is the question of where the data is going to be shown. You could show it only in the input box, or (which seems to be what you want to do) create a "dropdown list" where the data is displayed.

If you create the "dropdown list" you need to ask yourself if the user is going to be able to interact with it; should the user be able to use the up/down keys to go through the list; should the user be able to pick from the list with a mouse click; etc.

0
 
CallConnectionAuthor Commented:
Your reply was really excellent! Thank you!!!!!!! ...The good news is that I have also managed to find my own solution to the above, but I would look very intently at all the possible ways, and most probably ammend my slightly querky approach with your suggested improvements. Cheers, Dmitri
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now