Avatar of Axter
Axter
Flag for United States of America asked on

autocomplete with multiple hyperlinks in the list

I'm trying to use jquery autocomplete plugin to display autocomplete for input field, and to list hyperlinks which match users input before user selects search.
http://docs.jquery.com/Plugins/autocomplete

This would be similar to the Google interface.
I have the below code which works fine for the input field, but I'm can't seem to figure out how to update the result or ListOfLinks section with the hyperlinks matching what user has typed (before user enters submit).

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="includes/jquery-1.6.1.min.js"></script>
<script type='text/javascript' src='includes/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='includes/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='includes/thickbox-compressed.js'></script>
<script type='text/javascript' src='includes/jquery.autocomplete.js'></script>
<script type='text/javascript' src='includes/localdata.js'></script>
<link rel="stylesheet" type="text/css" href="includes/main.css" />
<link rel="stylesheet" type="text/css" href="includes/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="includes/thickbox.css" />
	
<script type="text/javascript">
$().ready(function() {
	$("#singleBirdRemote").autocomplete("autocompletequery.jsp", {
		width: 260,
		selectFirst: false
	}
	);
	
// 	$(":text, textarea").result(findValueCallback).next().click(function() {
// 		$(this).prev().search();
// 	});
	
	$("#singleBirdRemote").result(function(event, data, formatted) {
		if (data)
			$(this).parent().next().find("input").val(data[1]);
	});
	
});

</script>
</head>
<body>
	<form autocomplete="off">
		<p>
			<input type="text" id="singleBirdRemote" />
			<input type="button" value="Get Value" />
		</p>
	</form>
	
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<div  id="ListOfLinks" >
		This is a test
	</div>
	<br/>
	<br/>

	<h3>Result:</h3> <ol id="result"></ol>
	
</body>
</html>

Open in new window


How can I add logic to update the other fields while user is entering text in the input field?
JavaScriptCSSJSP

Avatar of undefined
Last Comment
Axter

8/22/2022 - Mon
colr__

Try replacing this:

$("#singleBirdRemote").result(function(event, data, formatted) {
		if (data)
			$(this).parent().next().find("input").val(data[1]);
	});

Open in new window


With this:

$("#singleBirdRemote").result(function(event, data, formatted) {
		if (data){
		       $(this).parent().next().find("input").val(data[1]);
		       $('#ListOfLinks').html(data[1]);
		}
	});

Open in new window


This should update the value of the text field with the autocomplete data, and also update the 'innerHtml' of the ListOfLinks section

Axter

ASKER
Thanks colr,
I tried it, but it had no effect.

Neither result field, nor ListOfLinks got updated.
ASKER CERTIFIED SOLUTION
Axter

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Axter

ASKER
Found my own solution for this issue.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes