www.webdeveloper.com
Results 1 to 4 of 4

Thread: Slow Lookup?

Hybrid View

  1. #1
    Join Date
    Jan 2014
    Posts
    2

    Slow Lookup?

    Hello all, this is my first post on this site, hopefully this is in the right place.

    I've written this simple jscript function, that filters results from an array into a DIV based on whatever I type into a text box. - then when I click on one of the results, it drops the value into the Textbox.

    Its working as expected, just very slow for the first 2 characters that I type? after that its works OK..
    until I delete the line and start typing again.

    The array is 850 rows long,

    Tried it on 3 different PCs, different browsers etc. all the same

    has anyone else done this and had better results?

    Thanks in advance!
    Dave


    Code:
     <script>
            function updSrch(val2) {
                document.getElementById("orig").value = val2;
                document.getElementById("divnames").style.display = "none";
            }
    
            function hideit() {
                document.getElementById("divnames").style.display = "none";
            }
    
            function findit(val1) 
            {
                document.getElementById("divnames").style.display = 'none';
                document.getElementById("divnames").innerHTML = "";
                document.getElementById("divnames").innerHTML += "<div style='position:absolute; top:1px; right:1px;'><a href='#' style='color:Red' onclick='hideit()'>[X]</a></div>"
               for (var i = 0; i < ADUser.length; i++) 
               {           
                    if (ADUser[i].indexOf(val1) === -1){
                    } else {
                        document.getElementById("divnames").style.display = 'block';
                    
                    var theline = ADUser[i];
                    var spl = theline.split(",");
                    var asp = "'" + spl[0] + "'";
    
                    var Str = '<br><a onclick="updSrch(' + asp + ')" style="color:#524CFF; cursor:pointer;" >' + spl[1] + ' ' + spl[2] + '</a>';
                    document.getElementById("divnames").innerHTML += Str;
                    };
                };            
             }
        </script>
    
    
       <input type='text' id='orig' Width="250px" style='min-width:250px' onkeyup='findit(this.value);' >
       <i style='color:#909090'>Username from Active Directory only</i>
                    
                    <div style='
                        display:none;
                        background-color:#e6e6e6; 
                        width:200px; min-height:10px;
                        border:1px solid #808080;
                        padding:3px;
                        position:relative;
                        ' id='divnames'>
                         
                        
    
                    </div>

  2. #2
    Join Date
    Mar 2012
    Posts
    202
    I think you'll want to look at regular expressions to find matches, it's much quicker than indexOf... You'll probably want to include an if statement to check if the amount of characters is over a certain amount anyways.

    A couple of other things:

    - I noticed you set innerHTML=""; then appended it with innerHTML+="..."; Why not just go with innerHTML="..."; ?
    - You can get rid of the unnecessary if statement "if (ADUser[i].indexOf(val1) === -1){ } else {" and simply replace with "if(ADUser[i].indexOf(val1) != -1) {"

    JavaScript RegExp Object

  3. #3
    Join Date
    Jan 2014
    Posts
    2
    Thanks for the quick reply Gray,

    yeah, not sure why I have a += instead of just =... it worked so I just left it..
    I also altered the IF to (ADUser[i].indexOf(val1) != -1) - ..

    Most importantly, I have it checking after the 3rd character is entered.. now it working perfectly very happy with it now..

    The page is a .net page that pulls all AD users into an array, then when completing a service ticket, its filtering the names and returning just their username.. all working great..

    thanks again for your help!

    Dave

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    try this search example. it shows time taken for each search.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    body,input{text-align:center;}
    div{margin-top:30px;margin-bottom:30px;}
    </style>
    <script>
    var chars='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,1,2,3,4,5,6,7,8,9,0'.split(','),
        arr=[],
    	stor={};
    
    function rn(m,n){m=parseInt(m);n=parseInt(n);return Math.floor(Math.random()*(n-m))+m;}
    function $(id){return document.getElementById(id);}
    function timepoint(){return Number(new Date().getTime());}
    
    function createArr(num,len){
    var start=timepoint(),
    	end,
    	diff;
    for(var i=0;i<num;i++){
    if(i==num-1){end=timepoint();}
    var rname='';
    for(var j=0;j < len;j++){rname+=chars[rn(0,chars.length)]}
    arr.push(rname);
    }
    diff=end-start;
    $('info').innerHTML='Creating of the names array has taken about '+diff+' mseconds<br />the array length is '+arr.length;
    setTimeout(function(){
    if(arr.length==num){
    arr=arr.sort();
    for(var x=0;x < arr.length;x++){
    var first=arr[x][0];
    if(!stor[first]){stor[first]=[arr[x]];}
    else{stor[first].push(arr[x]);}
    }
    $('info').innerHTML+='<br />the array has been sorted<br />';}
    },diff+100);
    }
    
    function doSearch(val){
    if(!val||val==''){$('info').innerHTML=$('res').innerHTML='<b>ready</b>';return;}
    else{
    var subarr=stor[val[0]],start=timepoint(),end,re=new RegExp('^'+val),output='';
    for(var k=0;k < subarr.length;k++){
    if(re.test(subarr[k])){output+=subarr[k].replace(re,'<b style="color:Crimson">$&</b>')+'<br />';}
    if(k==subarr.length-1){end=timepoint();}
    }
    $('info').innerHTML='Searching has taken about '+(end-start)+' mseconds<br />';
    $('res').innerHTML=output.length>0?output:'nothing found';
    }
    }
    
    onload=function(){
    var howmany=10000,notallowed=/[^a-z\d]/g;
    createArr(howmany,15);
    $('in').onkeyup=function(){
    this.value=this.value.replace(notallowed,'');
    doSearch(this.value);
    }
    $('in').focus();
    }
    </script>
    </head>
    <body>
    <div id="info"></div>
    <input type="text" size="20" id="in" />
    <div id="res"></div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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