Conflicting Scripts

JavaScript
1

Hi,

I’m trying to get two autocomplete search scripts working on my site. One should take the user input in the business categories field and lookup values for the drop down list. The other should do the same in the business names field.

I’m not too strong on javascript but think I am pretty close. However I am having problems getting the two to work at the same time. The categories script is trying to lookup using the names value and vice versa.


<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
function lookup(searchcat) {
	if(searchcat.length < 3) {
	// hide the suggestions box
	$('.cat_suggestions_box').hide();
	}
	else {
	$.post("lookup_suggestions.php", {searchcat: ""+searchcat+""}, function(data) {
		if(data.length >0) {
			$('.cat_suggestions_box').show();
			$('.cat_suggestions_list').html(data);
			}
		});
	}
} //lookup

function fill(thisValue) {
	$('#searchcat').val(thisValue);
	$('.cat_suggestions_box').hide();
}
</script>
<script type="text/javascript">
function lookup(searchname) {
	if(searchname.length < 2) {
	// hide the suggestions box
	$('.name_suggestions_box').hide();
	}
	else {
	$.post("lookup_suggestions.php", {searchname: ""+searchname+""}, function(data) {
		if(data.length >0) {
			$('.name_suggestions_box').show();
			$('.name_suggestions_list').html(data);
			}
		});
	}
} //lookup

function fill(thisValue) {
	$('#searchname').val(thisValue);
	$('.name_suggestions_box').hide();
}
</script>

The html is:


<form class="searchform1" method="get" action="listings/" >
<fieldset>
<legend>Search By Category</legend>
<label for="searchcat">Category:</label>
<input class="isearch2" type="text" name="searchcat" id="searchcat" value="" onfocus="this.value=''" onkeyup="lookup(this.value);" />
<button class="ibutton1" type="submit">
</button>
</fieldset>
<div class="cat_suggestions_box" id="cat_suggestions_box" style="display:none;" >
<div class="cat_suggestions_list">
</div>
</div>
</form>

<form class="searchform1" method="get" action="listings/" >
<fieldset>
<legend>Search By Company Name</legend>
<label for="searchname">Name:</label><input class="isearch2" type="text" name="searchname" id="searchname" value="" onfocus="this.value=''" onkeyup="lookup(this.value);" />
<button class="ibutton1" type="submit"></button>
</fieldset>
<div class="name_suggestions_box" id="name_suggestions_box" style="display:none;" >
<div class="name_suggestions_list">
</div>
</div>
</form>

Suspect it’s something to do with the this.value but would appreciate any help putting this right.

Many thanks in advance.

2

Appreciate the feedback - as stated not too strong on Javascript but can see what you are getting at. Will revise to your advice and hopefully fix.

3

It would help if you could show the page that these are on so the conflict can be more easily traced. If these are running on the same page, the answer is pretty evident: You’re calling the same function from both and passing in a value without a way to differentiate between which search method should be called.

What I recommend doing is making one lookup function that also takes the type of lookup being done, and pass both those values to your php script.

If these are working separately on different pages, but returning the results of each other, then the issue is probably in the PHP. Check to make sure you’re using the right queries for the right post variables (ie, verify that searchcat looks at the category data and searchname looks at the name data.)

I hope this helps!