473,240 Members | 1,579 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,240 software developers and data experts.

JavaScript large loop logic on keypress

115 100+
Hi,

Im trying to use javscript to create somthing similar to an autocomplete control inside of javascript. When typing into an input text it loops through a div of available options and selects the closest match. The problem is i have a case where there is over 1000 possible options. If im looping through 1000 options on every keypress things obviously go a little slow.

I have taken as many "." lookups out as i can and use a cached length for the loop.

Any ideas or suggestions?
Sep 29 '08 #1
6 2167
iam_clint
1,208 Expert 1GB
first suggestion only start the lookup after 3 characters have been entered...
so only start the searching say if they type in cat.


another option place possible search results in an extra div.. so 1 div contains all possible options.. second div contains current matches (less to search through)..

Limit results
Sep 29 '08 #2
gits
5,390 Expert Mod 4TB
additionally it may be, that you could even optimize the loop itself ... show an example of the options and the loop and how this is used to get the matches ...

kind regards
Sep 29 '08 #3
ShadowLocke
115 100+
first suggestion only start the lookup after 3 characters have been entered...
so only start the searching say if they type in cat.


another option place possible search results in an extra div.. so 1 div contains all possible options.. second div contains current matches (less to search through)..

Limit results
I like the idea of caching the current matches. Let me explain better what im doing. The idea is to replace the IE select box. With the new select box you would be able to type in and it would use each letter you type in to make a match. (IE currently only brings you to the first match of the letter you type, and if you type a second letter it brings you to the first match of that letter. In FireFox when you type the second letter it keeps the first letter and goes to the first match of first letter plus second letter. {thats hard to explain...})

Here is the loop that occurs on key up:

[HTML]function cof_check_match(as_text_id)
{
var l_text = document.getElementById(as_text_id);//Event.element(event);
var l_select = l_text.parentNode;
var ls_id = "i_" + l_select.id;
var l_selectbox = eval(ls_id + ".selectbox");
var l_options = eval(ls_id + ".options");

var ls_original = l_text.value;
var ll_caret = cof_get_caret_pos(l_text)
var lb_match = false;

var ll_go_back = 0;

if( ll_caret > 0)
ls_original = ls_original.substring(0, ll_caret);

var l_option;
var lb_skip;

var ls_text_value;
var ll_text_len;

ls_text_value = l_text.value.toUpperCase();
ll_text_len = ls_text_value.length;

while(!lb_match)
{
for (var j = 0, jl = l_options.length; j < jl; j++)
{
l_option = l_options[j];
lb_skip = false;

if(!lb_match)
{
var ls_text = l_option.innerHTML.toUpperCase();

//See if text is found in list
if(ls_text.startsWith(ls_text_value) && ll_text_len != 0)
{
//Open list if its not open
if (Element.hasClassName(l_select, 'hide-dropdown'))
cof_select_open_dropdown(l_text);

//Scroll to option and set selects value
l_selectbox.scrollTop = l_option.offsetTop;
cof_set_select_value(l_select, l_option);

//Highlight extra text
if (l_text.selectionStart)
{
l_text.selectionStart = ll_text_len;
l_text.selectionEnd = l_text.value.length;
}
else
{
l_txt = l_text.createTextRange();
l_txt.moveStart("character", ls_original.length - ll_go_back);
l_txt.moveEnd("textedit");
l_txt.select();
}

lb_match = true;
break;
}
}
}

if(!lb_match && ll_text_len > 0)
{
ls_text_value = ls_text_value.substring(0, ll_text_len - 1);
ll_go_back++;
}
else
ls_text_value = l_text.value.toUpperCase();

ll_text_len = ls_text_value.length;

if(ll_text_len == 0)
{
l_text.value = l_options[0].innerHTML;
l_text.select();
break;
}
}
}[/HTML]


I alleviated some of the time by replacing the on key up with this:

[HTML] var l_text = Event.element(event);

clearTimeout(i_select_wait);
i_select_wait = setTimeout("cof_check_match('" + l_text.id + "')", 200);[/HTML]
Oct 3 '08 #4
gits
5,390 Expert Mod 4TB
wow ... there's a lot of function calls and dom-operations just for finding matches in a wordlist? function calls and dom-operations are very expensive ones and in case you have much data then this is very bad for performance and even could lead to a message from the browser, that the script could last too long ... i would redesign this code in the following way:

1. on page-load or when loading the options you could create a javascript-object that correspond to this list that should look like this:

Expand|Select|Wrap|Line Numbers
  1. var list_obj = {
  2.     'OPTION_VALUE_OR_INNER_HTML' : option_reference,
  3.     ...
  4. };
2. now you could easyly loop through that obj:

Expand|Select|Wrap|Line Numbers
  1. // create a regExp that ignores case
  2. var re = new RegExp('^' + 'your_chars_that_should_match', 'i');
  3.  
  4. // this array could store all the matching options
  5. var matches = [];
  6.  
  7. // just one efficient loop to get the matching options
  8. for (var i in list_obj) {
  9.     if (re.test(i)) {
  10.         matches.push(list_obj[i]);
  11.     }
  12. }
  13.  
3. now just work with the matches-array to build up the dropdownlist

i assume that you just wanted to show the matching options?

kind regards
Oct 4 '08 #5
ShadowLocke
115 100+
Thanks for taking the time to reply!

I'm not very experienced with regular expressions (or programming for that matter..) so i tend to forget about them. But i suspect it would be faster than using the toUpperCase & startsWith functions. I actually only want it to return the first ordered match. I was able to speed up a great deal when i changed the way "cof_set_select_value" (not shown) worked as it was looping through the list to unhighlight everything then highlight the selected value. By keeping track of the last item slected i was able to narrow everything down to only the one loop above so now its at least functional. Im gonna rewrite the loop using a regex and see if I can shorten it, then ill post my full results..
Oct 5 '08 #6
gits
5,390 Expert Mod 4TB
the greater performance-boost would come from the shown javascript-object that would represent your word-list so that you just wouldn't need to always retrieve the words from the document ...

kind regards
Oct 5 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

53
by: Cardman | last post by:
Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...
6
by: Andy | last post by:
I'm not sure why my checkbox code is not working as per intended. It always keeps saying "Please select the department" even though I check the department... appreciate any help. <!DOCTYPE HTML...
8
by: Peter Michaux | last post by:
Hi, I'm sure many here have already noticed this but it seems that the development of the browser world is paralleling the development of the computer world. However, the browser world is about...
61
by: shapper | last post by:
Hello, I would like to use a javascript library to simplify my coding process. I know a few: JQuery, Dojo, Yahoo UI, ... Which one do you advice me to use? Thanks, Miguel
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.