www.webdeveloper.com
Results 1 to 2 of 2

Thread: Pop-up option depending on the word type in edit box

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    6

    Pop-up option depending on the word type in edit box

    Hi,

    Currently, I created a drop-down box with a list of options. However, there are over 600 of options and it will be hard for users to scroll for the options.

    I need to allow users if they just type a letter/word, those matching option will pop-up in the drop-down list.

    Example:

    User type 'peter', the pop-up option will show all words that contain 'peter' only?

    Can anyone kindly help on this? Thanks.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    take this as a draft:

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Store</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:left;font-weight:bold;padding-top:250px;padding-left:500px;}
    input[type=text]{text-align:center;font-style:italic;margin-left:20px;}
    #err{display:inline;margin-left:20px;}
    #thelist{display:block;width:100px;}
    </style>
    <script type="text/javascript">
    /* creating random words and making options */
    var abc=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
    function doc(id){return document.getElementById(id);}
    function makeOpts(){
    var randoms=[];
    for(var k=0;k<599;k++){
    var str='';for(var i=0;i<5;i++){str+=abc[Math.floor(Math.random()*abc.length)];}
    randoms.push(str);
    }
    randoms=randoms.sort();
    for(var z=0;z<randoms.length;z++){
    var o=document.createElement('option');
    o.text=o.value=randoms[z];
    doc('thelist').add(o,null);
    }
    }
    
    function init(){
    var mask=/[a-zA-Z]{1,}/g;
    doc('usekw').onclick=function(){
    doc('err').innerHTML='';
    if(this.checked===true){doc('keyword').value='';doc('keyword').focus();}
    else{doc('keyword').value='';doc('keyword').blur();}
    }
    doc('keyword').onkeyup=function(){
    doc('err').innerHTML='';
    var val=this.value;
    if(doc('usekw').checked===false || !mask.test(val)){doc('thelist').selectedIndex=0;return;}
    else{
    var opts=doc('thelist').options,found=false;
    for(var i=1;i<opts.length;i++){
    var txt=opts[i].text.substring(0,val.length);
    if(txt===val){doc('thelist').selectedIndex=i;found=true;break;}
    else{continue;}
    }
    if(!found){doc('thelist').selectedIndex=0;doc('err').innerHTML='no matches found';}
    }
    }
    makeOpts();
    }
    
    window.onload=init;
    </script>
    </head>
    <body>
    <input type="checkbox" id="usekw" />&nbsp;use a keyword<input type="text" id="keyword" value="" /><div id="err"></div>
    <select id="thelist"><option>My list</option></select>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles