Member Avatar for Ruthan7

Hi All

I need help in making a Drop down search box

I have dropdown HTML code and also Search Box HTML code, could you please help me in making both as one

I made sample code but not sure why its not working, please do the need full

<HTML><HEAD><SCRIPT type="text/javascript">
function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('realitems').options;
  for(var i=0;i<output.length;i++) {
    if(output[i].value.indexOf(input)==0){
      output[i].selected=true;
      }
    if(document.forms[0].realtxt.value==''){
      output[0].selected=true;
      }
  }
}
</SCRIPT></HEAD><BODY>
<FORM>
Search <input type="text" id="realtxt" onkeyup="searchSel()" size="20">
<SELECT id="realitems">
<OPTION value="">Select...
<OPTION value="http://google.com">Google
<OPTION value="http://yahoo.com">Yahoo
<OPTION value="http://msn.com">MSN
</SELECT>

<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>
</BODY></HTML>

My Idea is when I start typing in search box the name (like google), drop list box should also change and when clicked on GO should go to the following link

  • 2 Contributors
  • 4 Replies
  • 216 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Ruthan7
Member Avatar for scrappedcola

I wouldn't use an actual html drop down but a styled div that sits below the input box(you can even add an anchor with an image next the input box to make it appear like an actual drop down. You basically have an onchange event listener on the input box that goes through all the items in the div (could be styled <ul> element as well)and hides/shows the appropriate elements. A really good example that uses a <ul> and jquery is here:http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

Member Avatar for Ruthan7

Hi scrappedcola

I checked with the link provided its working fine on my computer but not on my mobile (E71), I am trying this site for both mobile and computer, please help me with a simple way which can also be used in mobile too

where client can see the list and when he/she types in the search box, the list should get filtered

Thank you in Advance

Member Avatar for scrappedcola

The code on that site can be translated to javascript (jquery is just javascript) but since I've never done any mobile development I wouldn't be able to guarantee that it would work on your Nokia. I don't think any jQuery solution will work on your phone either as I saw a bug ticket on the JQuery site stating that it didn't work for someone else with that phone and the team responded with wontfix. That being said it would be a good way to learn about events and javascript to look at the jquery api and determine the long hand javascript that the library is doing for you. The jquery api can be viewed at jquery.com. Sorry I don't have anything else for you. If you get stuck in translating the code in the web site let me know where and I can give you pointers.

Member Avatar for Ruthan7

No Problem, Thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.