Javascript / Ajax

Hi,

Please see the attached javascript function. There is a search filed on the form like this:

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

The <select> element is like this:

<select class="pt9" name="cnms" ID="cnms" size="23" onChange="go_cust();">
                                    
</select>

Everything works perfectly, except, for the end customer, if enough characters are typed that there is only ONE match in the database (i.e., ONE <option> in the options list), that item visibly appears twice. This (they report) happens in Win 7, Chrome browser & Macbook, Chrome.

I have Win 7 & it works in Chrome & Firefox; that is, if there is just ONE item matching the characters typed, only ONE appears. It also works correctly on the iPad (IOS, Safari). I have used the same character patterns that the cusomer uses to get duplicates.

I'm thinking, why fight it, just prevent another option item being inserted if one with the same option.text is already there. What would be the code I could insert in the JavaScript to make that work?

Thanks

My thinking is that
showhint.js
Richard KortsAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Code looks fine - no reason for a duplicate
Can you post js
What browser/os are they using do you know - it maybe an hooky bug

To be sure there isn't two entries in the table? You are saying the exact same name works fine for you?
0
 
GaryCommented:
Got a live link?
Are you sure you are not getting confused with the selected value in the dropdown and the option value which is two different things giving the appearance of the same value twice.
0
 
Richard KortsAuthor Commented:
I can't give a live link unless there is a way to protect it; this is all password protected.

Is there a way in ee to do that where the general public DOES NOT see it?

I trust you, I could give you a guest login.

FYI, I CANNOT make it happen myself, but the customer sends screen shots. You PROBABLY could not see it either.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
GaryCommented:
You can make a question private so it doesn't show up in the search engines but not after the fact.

Though if you cannot see it then I likely cannot either.
Can you attach the screenshot
0
 
Richard KortsAuthor Commented:
Screen Shot
dupe-names.jpg
0
 
GaryCommented:
Well that is definitely duplicated.
Best check your server side code. Can you post it?
0
 
Richard KortsAuthor Commented:
Gary,

Attached is the code for the one upon which it produces duplicates.

But when I do this SAME one, no duplicates.

Thanks
get-cname1.php
0
 
Richard KortsAuthor Commented:
They use at least 2 environments; Win 7, Chrome and Macbook, Chrome.

I tried Win7, Chrome; works fine for me.

Attached is a screen shot of "SELECT * from customer where lastname like "ab%".

Richard
0
 
GaryCommented:
Dunno then, without a link this cannot be really taken any further.
0
 
Ray PaseurCommented:
JavaScript Code:

function showHint(str) {
	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) {
			name_array=xmlhttp.responseText;
			if (name_array != "") {
				cnames = name_array.split(",");
				nr = cnames.length;
				var x = document.getElementById("cnms");
				for (i = 0; i < nr; i++) {
					tname = cnames[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.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();
}

Open in new window

PHP Code:

<?
function get_color($x) {
	$r = '';
	if ($x['donotservice'] == 'Y') {
		$r = 'r';
	}	
	if ($x['vip'] == 'Y') {
		$r = 'p';
	}
	if ($x['lawngevity'] != "0000-00-00") {
		$r = 'g';
	}
	if ($x['commc'] == 'Y') {
		$r = 'y';
	}
	return $r;
}	
// ajax file to search for customer name
include "db_connect.php";
$str = urldecode(strtoupper($_GET['q']));
// break into two if a space is in it
$possp = strpos($str, " ");
if ($possp !== false) {
	$ss = explode (" ",$str);
	$qry = "SELECT * from customer where cid <> 0 and ((lastname like '%" . $ss[1] . "%' and firstname like '%" . $ss[0] . "%') or (lastname like '%" . $str . "%' or firstname like '%" . $str . "%')) order by lastname";
	//echo "qry = " . $qry . "<br>";
} else {	
	$qry = "SELECT * from customer where cid <> 0 and (lastname like '%" . $str . "%' or firstname like '%" . $str . "%') order by lastname";
}	
$res = mysql_query ($qry, $Link);
$nr = mysql_num_rows($res);
if ($nr == 0) {
	echo "no match";
} else {
	$r = "";
	for ($i = 0; $i < $nr; $i++) {
		$c = mysql_fetch_array($res);
		$cl = get_color($c);
		$cn = $c['cid'] . $c['firstname'] . " " . $c['lastname'];
		if ($cl != "") {
			$cn = "/" . $cl . "/" . $cn;
		}	
		if ($r == "") {
			$r = $cn;
		} else {
			$r = $r . "," . $cn;
		}
	}
}
echo $r;
exit;	
?>

Open in new window

0
 
Ray PaseurConnect With a Mentor Commented:
Here's what you want to learn about.  It's a pretty well understood design pattern.  I think it would be best to start over with the industry-standard solution rather than try to write your own cross-browser replacement for jQuery Autocomplete.
http://jqueryui.com/autocomplete/
http://api.jqueryui.com/autocomplete/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.