[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Autocomplete

Posted on 2014-08-15
27
Medium Priority
?
113 Views
Last Modified: 2014-09-16
This is a followup to http:Q_28483537.html. Same issue.

I will provide live link to responders.
0
Comment
Question by:Richard Korts
  • 13
  • 12
26 Comments
 

Author Comment

by:Richard Korts
ID: 40268583
OK, thanks.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40272555
Recommend you create a test-case that can be exposed without password protections.  When we want to ask technical questions the most useful concepts are to be found in the SSCCE.  It's nearly impossible to debug software when we cannot see the test data and the code.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40299901
replace :

function showHint(str) {
	gstr = str;

Open in new window


by :

var notYet = false;
function showHint(str) {
        if(notYet) return false;
        notYet = true;
	gstr = str;

Open in new window


and replace :
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			name_array=xmlhttp.responseText;

Open in new window


by:
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			notYet = false;
			name_array=xmlhttp.responseText;

Open in new window


finally replace :
<input type="text" size="50" onkeyup="showHint(this.value)" onChange="chk_blnk(this.value);">

Open in new window

by :
<input type="text" size="50" onkeyup="return showHint(this.value)" onChange="chk_blnk(this.value);" />

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 83

Expert Comment

by:leakim971
ID: 40299907
else do synchronous ajax call so replace :
if (document.getElementById("c").checked) {
		xmlhttp.open("GET","get_cname1.php?q="+qstr,true);
	}
	if (document.getElementById("a").checked) {
		xmlhttp.open("GET","get_addrn.php?q="+str,true);
	}
	if (document.getElementById("p").checked) {
		xmlhttp.open("GET","get_phonen.php?q="+str,true);
	}	
	if (document.getElementById("m").checked) {
		xmlhttp.open("GET","get_commentsn.php?q="+qstr,true);
	}
	if (document.getElementById("n").checked) {
		xmlhttp.open("GET","get_cnumbern.php?q="+str,true);
	}
	if (document.getElementById("w").checked) {
		xmlhttp.open("GET","get_wonumn.php?q="+str,true);
	}
	if (document.getElementById("e").checked) {
		xmlhttp.open("GET","get_emailn.php?q="+str,true);
	}

Open in new window

by :
if (document.getElementById("c").checked) {
		xmlhttp.open("GET","get_cname1.php?q="+qstr,false);
	}
	if (document.getElementById("a").checked) {
		xmlhttp.open("GET","get_addrn.php?q="+str,false);
	}
	if (document.getElementById("p").checked) {
		xmlhttp.open("GET","get_phonen.php?q="+str,false);
	}	
	if (document.getElementById("m").checked) {
		xmlhttp.open("GET","get_commentsn.php?q="+qstr,tfalse);
	}
	if (document.getElementById("n").checked) {
		xmlhttp.open("GET","get_cnumbern.php?q="+str,false);
	}
	if (document.getElementById("w").checked) {
		xmlhttp.open("GET","get_wonumn.php?q="+str,false);
	}
	if (document.getElementById("e").checked) {
		xmlhttp.open("GET","get_emailn.php?q="+str,false);
	}

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 40299911
what happen is when user type quickly or have a fast computer, connexion you have multiple ajax call whihc append the same result because each ajax call are inddepend of others aand not sequential, one after one
0
 

Author Comment

by:Richard Korts
ID: 40299954
To leakim971

I don't understand the first part. You say to put above Function showHint.

That seems illogical, that will only be executed ONCE when the page loads.

Is that the intention?

Every else makes sense; I never though about fast typist, I am slow.

Thanks!
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40299961
The first code block any keypress until thé last Ajax  call is ended
0
 

Author Comment

by:Richard Korts
ID: 40299962
To leakim971

I don't understand what that means.

Thanks.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40299968
it will slow fast typist
0
 

Author Comment

by:Richard Korts
ID: 40301268
I understand that; what I DO NOT understand is where to put the JavaScript statement:

var notYet = false;

Thanks,

Rkorts
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40301401
Just do a replace of the block, just like explained in my first answer
0
 

Author Comment

by:Richard Korts
ID: 40301662
To leakim971,

I applied the changes. Now it doesn't work at all. That is, type in three letters like "Mil" & nothing shows.

HTML attached.

Thanks,

rkorts
cust-wons.htm
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40301720
move line 129 after line 235
your should use if,if else instead if,if, if lines 215 to 235
bad = "N";
	
tp = "c";
ac = "";	
wid = "";
wsch = "";
cid = 0;
cname = "";
pstr = "";
	
wrk = new Array();
var nw;
var gstr = "";

	function chk_vals() {
		if (ac == "a") {
			document.ts.action = "add_updt_cust.php";
			return true;
		}
		return true;
	}
	function chk_vals_cd() {
		type = get_radio_type();
		if (ac == "b") {
			dest = "asbuilts/" + cid + ".gif";
			window.open(dest,"asbuilt","width=800,height=1100,scrollbars=yes,menubar=yes");
			ac = "";
			return false;
		}
		if (ac == "d") {
			jj = confirm("Confirm deletion of customer " + cname + "?");
			if (! jj) {
				return false;
			} else {
				document.cd.action = "delete_cust.php?cid=" + cid + "&pstr=" + gstr + "&type=" + type;
				return true;
			}
		}	
		if (ac == "c") {
			document.cd.action = "add_updt_cust.php?cid=" + cid + "&pstr=" + gstr + "&type=" + type;
			return true;
		} else {
			document.cd.action = "base_cust_updt.php?cid=" + cid + "&pstr=" + gstr + "&type=" + type;
			return true;
		}	
	}	
	function chk_vals_wo() {
		type = get_radio_type();
		if(ac == "aw") {
			document.wo.action = "add_updt_wo.php?cid=" + cid + "&type=" + type + "&pstr=" + gstr + "&mode=a";
			return true;
		}
		if (ac == "u") {
			document.wo.action = "add_updt_wo.php?wo=" + wid + "&cid=" + cid + "&type=" + type + "&pstr=" + gstr;
			return true;
		}
		if (ac == "e") {
			window.open("email_wo.php?wid=" + wid, "email", "height=600,width=700,scrollbars=yes,menubar=yes");
			return false;
		}
		if (ac == "p") {
			window.open("print_wo.php?wo=" + wid, "print", "height=1500,width=1000,scrollbars=yes,menubar=yes");
			return false;
		}	
	}	
function repos_list() {
	ky = document.ts.ss.value;
	ky = ky.toUpperCase();
	lx = ky.length;
	m=document.ts.cnms.options.length
	for (i = 0; i < m; i++) {	
		v = document.ts.cnms.options[i].value;
		v = v.toUpperCase();
		jj = v.indexOf(ky);
		if (jj == -1) {
			document.ts.cnms.options[i].style.display = "none";
		}else{
			document.ts.cnms.options[i].style.display = "block";
		}
	}	
}
function re_do(x) {
	document.ts.action = "cust_won.php?type=" + x;
	document.ts.submit();
}
function go_cust() {
	val = encodeURIComponent(document.ts.cnms.value);
	type = get_radio_type();
	document.ts.action = "cust_wons.php?pstr=" + gstr + "&cid=" + val + "&type=" + type;
	document.ts.submit();
}
function get_radio_type() {
	if (document.ts.st[0].checked) {
		tp = "c";
	}
	if (document.ts.st[1].checked) {
		tp = "a";
	}
	if (document.ts.st[2].checked) {
		tp = "p";
	}
	if (document.ts.st[3].checked) {
		tp = "m";
	}
	if (document.ts.st[4].checked) {
		tp = "e";
	}
	if (document.ts.st[5].checked) {
		tp = "n";
	}
	if (document.ts.st[6].checked) {
		tp = "w";
	}
	return tp;
}	
function chk_ws() {
	if (wsch != "") {
		alert("No Work Orders found for " + wsch + ".");
	}
	if (cid != 0) {
		showHint(pstr);
		
	}	
		
}
var notYet = false;
function showHint(str) {
    if(notYet) return false;
    notYet = true;
	gstr = str;
	ml = 3;
	if (document.getElementById("n").checked) {
		ml = 5;
	}
	if (document.getElementById("w").checked) {
		ml = 6;
	}	
	if (str.length<ml) {
		document.getElementById("cnms").options.length = 0;
		return;
	}
	document.getElementById("cnms").options.length = 0;
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			notYet = false;
			name_array=xmlhttp.responseText;
			if (name_array != "") {
				cnames = name_array.split(",");
				nr = cnames.length;
				cname = new Array();
				k = 0;
				for (i = 0; i < nr; i++) {
					if (i == 0) {
						cname[0] = cnames[0];
						k++;
					} else {
						dupe = false;
						for (j = 0; j < k; j++) {
							if (cnames[i] == cname[j]) {
								dupe = true;
								break;
							}	
						}
						if (! dupe) {
							cname[k] = cnames[i];
							k++;
						}
					}
				}		
				var x = document.getElementById("cnms");
				for (i = 0; i < k; i++) {
					tname = cname[i];
					bgc = get_bgcolor(tname);
					ln = tname.length;
					bgcl = "";
					if (bgc != "") {
						tname = tname.substr(3,ln-3);
						if (bgc == 'r') {
							bgcl = "background-color:red;";
						}
						if (bgc == 'g') {
							bgcl = "background-color:green;";
						}
						if (bgc == 'y') {
							bgcl = "background-color:yellow;";
						}
						if (bgc == 'p') {
							bgcl = "background-color:#800080;";
						}
					}	
					cnum = tname.substr(0,5);
					ln = tname.length;
					tname = tname.substr(5,ln-5);
					var opt = document.createElement('option');
					opt.text = tname.replace("&#39;", "'");
					opt.value = cnum;
					if (cid != 0) {
						if (cid == cnum) {
							opt.selected = true;
							document.getElementById("cnms").selectedIndex = i;
						}
					}		
					if(bgcl != "") {
							opt.setAttribute('style', bgcl);
					}
					x.appendChild(opt);	
				}	
			}
		}

	}
	var timestamp = new Date();
	qstr = encodeURIComponent(str);
	if (document.getElementById("c").checked) {
		xmlhttp.open("GET","get_cname1.php?q="+qstr,true);
	}
	if (document.getElementById("a").checked) {
		xmlhttp.open("GET","get_addrn.php?q="+str,true);
	}
	if (document.getElementById("p").checked) {
		xmlhttp.open("GET","get_phonen.php?q="+str,true);
	}	
	if (document.getElementById("m").checked) {
		xmlhttp.open("GET","get_commentsn.php?q="+qstr,true);
	}
	if (document.getElementById("n").checked) {
		xmlhttp.open("GET","get_cnumbern.php?q="+str,true);
	}
	if (document.getElementById("w").checked) {
		xmlhttp.open("GET","get_wonumn.php?q="+str,true);
	}
	if (document.getElementById("e").checked) {
		xmlhttp.open("GET","get_emailn.php?q="+str,true);
	}	
	xmlhttp.send();
}
function chk_blnk(x) {
	if (x.length < 3) {
		document.getElementById("cnms").options.length = 0;
	}
}
function get_bgcolor(x) {
	c = "";
	if (x.substr(0,1) == "/" && x.substr(2,1) == "/") {
		c = x.substr(1,1);
	}
	return c;
}

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 40302238
To leakim971,

Still fails. Here is code after move you suggested:

var notYet = false;
function showHint(str) {
    if(notYet) return false;
      gstr = str;
      ml = 3;
      if (document.getElementById("n").checked) {
            ml = 5;
      }
      if (document.getElementById("w").checked) {
            ml = 6;
      }
      notYet = true;
      if (str.length<ml) {
            document.getElementById("cnms").options.length = 0;
            return;
      }
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40302254
no, the lines I'm talking about is from the code snippet I posted in my previous answer not in your code
because as you make lot of test and sometimes not setting back notYet to false, we need to set it just before the ajax call, xhr.send()
0
 

Author Comment

by:Richard Korts
ID: 40302439
OK, I did that & it seems to work.

I will ask the customer to test it.

Thanks!
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40302445
'welcome
0
 

Author Comment

by:Richard Korts
ID: 40302492
It may be a day or two before I know; the customer is in their "busy" season & doesn't have much time for testing the "new" system right now.
0
 

Author Comment

by:Richard Korts
ID: 40304371
To leakim971,

The customer reported he is still getting duplicates on his Macbook, using Chrome.

See attached.

I am awaiting response from the admin person who uses the system most on a Win 7 PC with Chrome.

Thanks
Screen-Shot-2014-09-04-at-1.36.06-PM.jpg
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40304378
be sure they clear their cache...
0
 

Author Comment

by:Richard Korts
ID: 40304782
To leakim971,

He did it again, cache cleared. Same result.

So I have to believe that your solution did not work.

Thanks
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40304801
try the second solution
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40304802
ID: 40299907
0
 

Author Comment

by:Richard Korts
ID: 40304851
To leakim971

It kind of works for me but if you type to quickly it will miss some letters.

They are wanting to type in the WHOLE name most of the time, so that's what I did to to test it.

Does the other mode slow it down?
0
 

Accepted Solution

by:
Richard Korts earned 0 total points
ID: 40318195
To all,

I seem to have solved the problem via trial & error.

I realized that the database table that contained the customer names (about 12,500 presently) was not index on the names so I introduced an index on the last name, first name.

This action actually seems to make the process too fast; results from 3 keys were NOT replaced with results from 5 - 6 key strokes.

So I put a delay in, like this:

if (document.getElementById("c").checked) {
            setTimeout(xmlhttp.open("GET","get_cname1.php?q="+qstr,true), 200);
      }
I had first tried it with 100 ms, bad results remained. I set it to 200MS, customer says it now works fine. Of course it may not work fine forever, but for now, seems OK.

Thanks for your efforts.
0
 

Author Closing Comment

by:Richard Korts
ID: 40324960
As described in the text given.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question