Capturing Key Event

[dmjpro]

Actually what i am trying to do that is to search some data as per users' entries.
Firstly i am fetching the whole data from the database and keeping in a hidden table then as user gives the search string then i manipulate from the hidden table and displaying those into visible one. Now suppose i have huge data and i am performing sequential search so a large no of iterations is going on whenever key pressed. So it slows down the whole process i mean the entered letters are not coming smoothly after the whole search finished then the entered keys displayed in the text box. and if i type so fast then in the mean time browser hanged.

Now i want if user presses a key then search starts and if user again presses key before iteration is over then iteration should stop and start from the begining as per what user typed. So how do i capture that event if the iteration does not end.

Please suggest something.

[acoder]

I would suggest, first of all, that you avoid a hidden table and use an object or array to store the data. This would avoid querying the DOM every time.

[dmjpro]

is that late for DOM querying? ;)

[acoder]

I'm not sure what you mean there.

In your original problem, you could use an object to deal with the manipulation of the data. It could have a variable which is used to indicate that the search should stop or continue which you can set to false when another key is pressed.

[dmjpro]

Hey Acoder strange!
The same policy i tried to stop searching .. onKeyDown i am having the searching loop and onKeyPress i am having another handler to set the flag true or false. But i failed to manage the problem.
Have a look at my code.

            var prev_rolename = '';
            var prev_roleDeptName = '';
            var prev_roleDeptCode = '';
            var prev_userName = '';
            var prev_userDesgCode = '';
            var prev_userDeptCode = '';
            
            var _break = false;

            function reArrnageList(){
                document.getElementById('MainDataDiv').style.display = 'block';
                document.getElementById('NoDataDiv').style.display = 'none';
                
                var searchString = document.getElementById('searchString').value;
                var searchStringDesg = document.getElementById('searchStringDesg').value;
                var searchStringDeptCode = document.getElementById('searchStringDeptCode').value;
                
                var dummmyTab = document.getElementById('DummyTable');
                var mainTab = document.getElementById('MainTable');
                for(var i=1;i<mainTab.rows.length;){mainTab.deleteRow(i);i=1;}
                for(var i=0;i<dummmyTab.rows.length;i++){
                    
                    if(_break){_break=false;i=0;continue;}
                    
                    var userName = dummmyTab.rows[i].cells[0].childNodes[1].value;
                    var desgCode = dummmyTab.rows[i].cells[1].innerHTML;
                    var deptCode = dummmyTab.rows[i].cells[2].innerHTML;
                    if(searchString.length>userName.length)
                        continue;
                    //if(userName.toUpperCase().substr(0,searchString.length)==searchString.toUpperCase()){
                    if(userName.toUpperCase().indexOf(searchString.toUpperCase())!=-1
                       && desgCode.toUpperCase().indexOf(searchStringDesg.toUpperCase())!=-1
                       && deptCode.toUpperCase().indexOf(searchStringDeptCode.toUpperCase())!=-1){
                        var cloneRow = document.getElementById('userListTR_'+(i+1)).cloneNode(true);
                        document.getElementById('HeaderRow').parentNode.appendChild(cloneRow);
                    }
                }
                //document.getElementById('searchString1').focus();
                if(mainTab.rows.length==1){
                    document.getElementById('MainDataDiv').style.display = 'none';
                    document.getElementById('NoDataDiv').style.display = 'block';
                }
            }

            function stopSearch(){
                var cur_userName = document.getElementById('searchString').value;
                    var cur_userDesgCode = document.getElementById('searchStringDesg').value;
                    var cur_userDeptCode= document.getElementById('searchStringDeptCode').value;
                    var cur_rolename = parent.frames['roleWindow'].document.getElementById('searchString').value;
                    var cur_roleDeptName = parent.frames['roleWindow'].document.getElementById('searchStringDept').value;
                    var cur_roleDeptCode  = parent.frames['roleWindow'].document.getElementById('searchStringDeptCode').value;
                    
                    if(prev_rolename!=cur_rolename || cur_roleDeptName!=prev_roleDeptName || cur_roleDeptCode!=prev_roleDeptCode
                       || cur_userName!=prev_userName || cur_userDesgCode!=prev_userDesgCode || cur_userDeptCode!=prev_userDeptCode){
                        prev_rolename = cur_rolename;
                        prev_roleDeptName = cur_roleDeptName;
                        prev_roleDeptCode = cur_roleDeptCode;
                        prev_userName = cur_userName;
                        prev_userDesgCode = cur_userDesgCode;
                        prev_userDeptCode = cur_userDeptCode;
                   }
                }

<input type="text" name="searchString1" id="searchString1" onkeyup="document.getElementById('searchString').value=this.value;reArrnageList();" onkeydown="stopSearch()"/>

Thanks!

[acoder]

You could use return to stop processing the function.

By using a table, it will take longer, so you may still want to consider using a data structure (array or object).

[dmjpro]

OK i will be fixing it soon and let you know ..hope the positive result will come ;)

[dmjpro]

I am using Object Array ... Still it's not working ..it's working late than before .. :(
What is happening when the loop is getting processed then the Browser gets busy .. then it's no more able to process any signal .. that's why it's happening such ..But if the key getting pressed rapidly then how should i capture in my situation ... ;)

[acoder]

Approximately how much data are we talking about here? Any chance you could provide a link?

[dmjpro]

No chance of providing link... The question is not about how much Data.
The question is if somewhere machine stuck then can't it be stopped?

[acoder]

The problem also concerns how you store the data. If stored alphabetically, you could disregard most of the data on the first key press which potentially reduces the data to be searched by 26 times. You could also store it in a tree-like structure so the first letter would go at the top, but subsequent letters would be on the left or right depending on position in the alphabet with respect to the top letter. That would be with objects. You could also use arrays and JSON.

Anyway, once a key is pressed, it's processing the data. Use onkeyup to trigger the function call. Then set a maximum number of results to return, e.g. 10. Once you have 10 results, don't get any more results.